使用:带有类选择器的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>？似乎伪类选择器不适用于类选择器.这是奇怪的,因为我可以发誓我曾经使用它.

更新:糟糕,完全忘记了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;
}

我理解你的想法,但是班级"标题"的lis不是第二个或最后一个孩子.

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表示你知道有多少<li>在你的<li class ="heading">之后,在我们的情况下,它是从底部开始的第二个.

Answer 4

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

试试这个：

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