Question

我想设置最后/秒.heading的样式。

<ul>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
    <li>Hello world</li>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
</ul>

无论

ul li.heading:last-child {
    background: black;
}

，也不

ul li.heading:nth-child(2) {
    background: black;
}

适合我。为什么，以及如何将样式应用于<li>？似乎伪类选择器不适用于类选择器。这是奇怪的，因为我可以发誓我曾经使用它。

更新：哎呀，完全忘了the jsfiddle。

Answer 1

你的陈述是：“我想设计最后/第二个.heading。”

这意味着您必须像这样编写代码：

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

CSS：

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

另外，使用您当前的html代码，您会写：

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

我理解你的想法，但是班级“标题”的谎言不是第二个或最后一个孩子。

Answer 2

您可以使用ul li.heading:nth-of-type，它将仅按照您的html CSS来考虑标题类

li.heading:nth-of-type(2){ background: black;}

或

li.heading:last-of-type{ background: black;}

Answer 3

ul li.heading:nth-last-child(2)

2表示你知道在＆lt; li class =＆＃34;标题＆＃34;＆gt;之后有多少＆lt; li＆gt;在我们的例子中它是从底部第二。

Answer 4

这是因为li.heading不是最后一个孩子，也不是第二个孩子。它是ul

的第一个和第四个孩子

尝试一下：

  ul li.heading:nth-child(4) {
    background: black;
}

使用：带有类选择器的last-child

4 个答案: