使用 CSS 定位嵌套列表中元素的所有相邻兄弟姐妹

Question

这是我网站上的简化标记：

<div id="block">
    <ol>
        <li> <--
            <ol>
                <li>
                    ...
                </li>
            </ol>
        </li> <--
    </ol>       
    <ol>
        <li> <--
            <ol>
                <li>
                    ...
                </li>
            </ol>
        </li> <--
    </ol>
</div>

我只想定位每个顶级 ol 中的第一级 li 元素（我用箭头标记它们）。

我应该如何编写我的选择器来定位这些元素？

Answer 1

使用 child combinator 仅定位儿童

#block > ol > li { … }

这会自动排除 descendant li 个元素。

Answer 2

你可以这样做

#block > ol > li

使用 > 将确保它更深 1 级，而不是更多。

Answer 3

#block ul > li {}

有关详细信息，请参阅 https://css-tricks.com/child-and-sibling-selectors/

Answer 4

您可以使用子组合器选择器，但您需要小心，因为某些 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>

使用 CSS 定位嵌套列表中元素的所有相邻兄弟姐妹

Target all adjacent siblings of an element in a nested list with CSS

css

css-selectors

使用 child combinator 仅定位儿童