如何在项目列表中选择特定类的最后一个列表项？

Question

<ul>
    <li class="special"></li>
    <li class="special"></li>
    <li class="special"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

在这个例子中，我想只定位最后一个.special列表项。这只能使用CSS吗？

Answer 1

使用纯CSS无法实现它。

我建议使用 :last selector 使用javascript或更具体的jQuery替代方式：

$('ul li.special:last').css('color','red');

<强> Fiddle Demo

Answer 2

单独使用css，检查一下。 Working Fiddle

li:nth-child(3){
color:#f00;
}

Answer 3

如果您定位第一个非特殊元素，可能会有所帮助：

ul .special + li:not(.special) { background: red; }

Answer 4

如果您知道它总是有三个项目可以做这样的事情

.special + .special + .special {
    // your styles
}