Question

我有一个结构：

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

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

#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

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

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

Answer 2

#div li：last-child

你的第二个选择几乎正确:)我认为你误解了最后一个孩子做了什么。 xx：last-child它不选择元素xx的最后一个子元素;它选择每个xx元素，它是父元素的最后一个子元素。

Some reading

I've created a JSFiddle for you to test it

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

2 个答案: