css - nth-child 或 first/last-child 选择器不起作用。如何正确应用它们？

Question

我有一个结构：

<div id="div">
    <ul class="ul">
        <li class="li_one">
        </li>
        <li class="li_two">
        </li>
    </ul>
</div>

我想使用伪选择器设置background:red第二个元素（“li_two”类），并希望从最外层的 div 开始。li我正在尝试这种方式：

#div > ul:nth-child(1) { background:red; }   // works but wrong, sets background to ul
#div ul:last-child { background:red; }   // doesn't set to any element
#div ul:first-child { background:red; }  // again sets to ul but not to li
#div [class=li_two] { background:red; }  // only this one works fine

是否可以将样式设置li_two为#div使用:nth-child或:last-child或:first-child选择器？怎么做？

Answer 1

#div li:last-child

您的第二个选项几乎是正确的:) 我认为您误解了 last-child 所做的事情。xx:last-child 不选择元素xx的最后一个子元素；它选择作为其父级的最后一个子级的每个 xx 元素。

一些阅读。

我为你创建了一个 JSFiddle 来测试它

Answer 2

:nth-child()并且其他伪类应该应用于子元素，而不是父元素。将这些伪类应用于lis：

#div ul li:last-child {
    background: red;
}