如何在项目列表中选择特定类的最后一个列表项？ [复制]答案

【问题标题】：How can I select the last list item of a specific class in a list of items? [duplicate]如何在项目列表中选择特定类的最后一个列表项？ [复制]
【发布时间】：2014-03-03 22:30:24
【问题描述】：

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

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

【问题讨论】：

你不能，只有 CSS
@Mr.Alien 谢谢你的回答。我不明白为什么我的问题被否决并被标记为可能的重复，而事实并非如此。我得到任何标记它的人甚至没有阅读它。
@bernk 我几乎不反对，但它是重复的，所以它被标记为重复:)
是重复的，但不是using last-child的重复。

标签： css

【解决方案1】：

使用纯 CSS 无法实现。

我会建议使用 javascript 的替代方法，或者更具体的 jQuery 使用 :last selector：

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

Fiddle Demo

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，但这仅适用于静态列表。在我的情况下，它不是。
在这种情况下，Felix 的解决方案可以提供帮助。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：