css - CSS: :last-child 在列表项上

Question

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

例如，考虑以下内容：

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

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

我尝试了以下，但它不起作用。

ul.test li.one:last-child 

Answer 1

那还不可能。

• :last-child选择最后一个孩子，而不考虑标签名称等。
• 可能的替代方法是:last-of-type选择最后一次出现的tag。它忽略了类名等。

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

Answer 2

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

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

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

Answer 3

您可以使用 jquery 来做到这一点：http: //jsfiddle.net/surendraVsingh/HyAhL/2/

jQuery代码：

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