如何为一、二级ol设置不同列表样式？子组合器为何未生效？

你的问题出在子组合器的选择逻辑上：子组合器>仅匹配直接父元素的子元素，而你的二级<ol>并不是一级<ol>的直接子元素——它是一级<ol>里的<li>的直接子元素。

你原来的选择器#outline > ol > ol试图选中一级<ol>的直接子级<ol>，但实际上二级<ol>被包裹在<li>里，这个选择器根本匹配不到任何元素，所以样式不会生效。

正确的CSS代码 #

#outline > ol {
  line-height: 2em;
  margin: 0px 5px;
  list-style: upper-roman;
}

#outline > ol > li > ol {
  list-style: upper-alpha;
}

原理说明 #

• #outline > ol：匹配id="outline"的<nav>下的直接子级<ol>（也就是一级列表），设置大写罗马数字样式。
• #outline > ol > li > ol：匹配一级<ol>下的直接子级<li>里的直接子级<ol>（也就是二级列表），设置大写字母样式。

这样就能精准选中对应的层级，实现你想要的列表样式效果。

内容的提问来源于stack exchange，提问作者Cassie Xavier