html - 我如何定位第一个没有特定类(class)的 child ？

Question

如果我有下面的html

<ul id="some_list">
    <li class="hide">Do Not Target This</li>
    <li class="hide">Do Not Target This</li>
    <li>Target This</li>
    <li>Do Not Target This</li>
</ul>

我如何定位第一个没有隐藏类的 child ？例如

#some_list>li:not(.hide):first-child {
    color: #777;
}

但这行不通。

Fiddle

Answer 1

你可以使用 CSS adjacent sibling selector为了选择没有 .hide 类的第一个 li 元素:

EXAMPLE HERE .

li:first-child:not(.hide),
li.hide + li:not(.hide) {
    background-color: gold;
}

还要考虑检查第一个列表项(第一个子项)是否存在 .hide 类名。