CSS指向非'；他不是最后一个孩子

在不更改html的情况下是否有任何方法可以使用CSS将最后一个

.red

类作为目标

<div class="row">
    <div class="red">Red</div>
    <div class="red">Red</div>
    <div class="red">Target Me With CSS???</div>
    <div class="blue">Blue</div>
    <div class="blue">Blue</div>
    <div class="blue">Blue</div>
</div>

---

我不相信没有使用JS就可以做到这一点

最接近的目标是针对第三项：

.row div:nth-child(3) {
    background: chucknorris;
}

如果第三个子项为红色，则可以包含一个限定符，以仅针对该子项。如下所示：

.red:nth-child(3) {  
   background: chucknorris; 
}

---

不幸的是，单靠CSS无法做到这一点。以下是与您相关的其他几个SO问题：

然而，如果您的最后一个

.red

有时处于不同的位置，并且您根本无法更改HTML，那么您将不得不依赖一些简单的JS/jQuery

$(function() {
    $('.row .red').last().addClass('last-red-class');
});

您可以使用它将另一个类添加到最后一个

.red

，并在CSS中引用它

---

HTH

：类型描述的最后一个

The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.

和语法

element:last-of-type { style properties }

因此，在您的示例中真正发生的是浏览器选择了正确的div元素，但它不是其父元素的最后一个div元素；因此，没有采取任何措施。要测试这一点，请将所有.red类div更改为一个span并执行以下操作

.row span:last-of-type{
    background-color:#FF0000;    
}

然后您将得到一个工作代码

来源：

我特别声明->“不改变html”。

.row span:last-of-type{
    background-color:#FF0000;    
}