与类选择器一起使用：last-child

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

您的声明是：“我想要设置最后/第二个标题的样式。”

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

<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;
}

我了解您的想法，但是带有“标题”类的lis不是第二个或最后一个孩子。

Answer 2

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

2表示您知道在您的

之后，有多少

位在倒数第二。

Answer 3

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

的第一个和第四个孩子

尝试一下：

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

Answer 4

您可以使用ul li.heading:nth-of-type，它将根据您的HTML CSS将考虑only标题类

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