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>

如何定位没有隐藏类的第一个孩子？例如

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

但这不起作用。

Fiddle

Answer 1

您可以使用CSS adjacent sibling selector来选择没有li类的第一个.hide元素：

<强> EXAMPLE HERE

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

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

Answer 2

我认为这就是你想要的

#some_list>li.hide + li:not(.hide){

    color: #CCC;

}

Answer 3

使用javascript你可以做到这一点

http://jsfiddle.net/h_awk/5G5ED/4/

<script>
var parent = document.getElementById('some_list'),
    child = parent.getElementsByTagName('li');

child[2].style.color = 'blue';
</script>

我如何针对没有特定课程的第一个孩子？

3 个答案: