这是我在网站上的简化标记:
<div id="block">
<ol>
<li> <--
<ol>
<li>
...
</li>
</ol>
</li> <--
</ol>
<ol>
<li> <--
<ol>
<li>
...
</li>
</ol>
</li> <--
</ol>
</div>
我只想针对每个顶级ol
中的第一级li
元素(我用箭头标记它们)。
我应该如何编写选择器以针对这些元素?
你可以这样做
#block > ol > li
使用>将确保其深度为1级,而不是更多。
您可以使用子组合子选择器,但需要小心,因为一些CSS属性是继承的。
例如,list-style
属性将仅由于选择器而应用于第一个li
。但是,color
属性将被继承。
您可能需要根据需要使用重置规则将某些属性重置回某个默认值。
#block > ol > li {
color: blue;
list-style: circle;
}
#block > ol > li * {
color: black;
}
<div id="block">
<ol>
<li> <--
<ol>
<li>
...test
</li>
</ol>
</li> <--
</ol>
<ol>
<li> <--
<ol>
<li>
...test
</li>
</ol>
</li> <--
</ol>
</div>
#block ul > li {}
有关更多信息,请参阅https://css-tricks.com/child-and-sibling-selectors/
使用子组合子仅针对子
#block > ol > li { … }
这将自动排除子代li
元素。