CSS: :last-child 在列表项上答案

【问题标题】：CSS: :last-child on list itemCSS: :last-child 在列表项上
【发布时间】：2012-07-04 19:54:34
【问题描述】：

如果一个 ul 有多个类的 li 项，是否可以使用 :last-child 获取特定类的最后一项？

例如，考虑以下：

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

我想为最后一个具有“one”类的 li 添加一些样式（即列表中的第三个）。

我试过了，还是不行。

ul.test li.one:last-child

【问题讨论】：

【解决方案1】：

这是不可能的yet。

您唯一的选择是为该元素添加一个特定的类名，或者使用 JavaScript 添加这个类名。

【讨论】：

谢谢，但是 :last-of-type 将如何在上面的 html 示例中工作？
@user1355300 它不会按预期工作。在您的示例中，只有一种类型的孩子，即<li>。因此，:last-child 和 :last-of-type 选择相同的元素（第 5 个<li>）。见jsfiddle.net/vEphZ
我知道这是一个老问题，但对于未来的观众来说，我认为 Rob W 得到了正确的答案，但忘了完整地说出来。这：ul.test > li:last-of-type 应该只选择测试列表中的最后一项

【解决方案2】：

您可以使用 jquery：http://jsfiddle.net/surendraVsingh/HyAhL/2/

jQuery 代码：

var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');

【讨论】：

【解决方案3】：

您可以选择第 n 个孩子，而不是为每个 li 指定类，您可以在其中按 li 编号分配样式。

如果你想为你的第三个 li 提供单独的 css，那么你需要编写

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

【讨论】：