CSS: :last-child 在列表项上

Posted 2023-03-06

【中文标题】CSS: :last-child 在列表项上

【英文标题】：CSS: :last-child on list item

【发布时间】：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 

【问题讨论】：

我想你没有搜索那么多？ ***.com/questions/6401268/…

同样的问题，但（一些）不同的答案。重复有价值！！

【参考方案1】：

这是不可能的yet。

:last-child 选择最后一个孩子，不考虑标签名称等。 可能的替代方法:last-of-type 选择

标记

的最后一次出现。它忽略了类名等。

您唯一的选择是为该元素添加一个特定的类名，或者使用 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;