使用CSS定位嵌套列表中元素的所有相邻同级



这是我在网站上的简化标记:

<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元素。

最新更新