html - 选择具有特定类的最后一个元素

Question

是否可以选择具有特定类的最后一个元素？

例如：

<div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item">Select</div>
    <div class="item1"></div>
</div>

所以在这个例子中选择最后一个类元素.item。

我知道您可以为该元素添加一个额外的类，但我想知道是否可以仅使用 css 中的选择器来执行此操作。

jsFiddle

我已经尝试过的事情：

1. ：最后的
2. ：最后一个孩子
3. :last-type-of

Answer 1

您可以使用 :last-child 但是在您正在使用的 jsfiddle 上

.item:last-child
{
    background: red;
} 

采用

#wrapper :last-child
{
    background: red;
}

但是我不确定这会起作用，除非最后一个孩子实际上是容器中的最后一个元素

你可以试试jquery

$(".item").last().css( "background-color", "red" );

Answer 2

查看文档

E:nth-last-child(n) 一个 E 元素，其父元素的第 n 个子元素，从最后一个开始计数

http://www.w3.org/TR/css3-selectors/#selectors

好吧，在你的情况下

div.item:nth-last-child(1)

Answer 3

#wrapper .item:last-child
{
background: red;
}

在此之前，只需将最后一个项目类更改item1为item. 就是这样