CSS 定位类类型的最后一个，但不是最后一个子级

Question

JS Fiddle

在不改变 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>

这是我尝试过的:

.row > div{
    display:inline-block;
    padding:10px;
}

.row .red{
    background-color:#770000;    
    color:#fff;
}

.row .red:first-child{
    background-color:#440000;    
    color:#fff;
}

/*have tried :last-of-type too*/
.row .red:last-child{
    background-color:#FF0000;    
}

.row div:last-child{
    background-color:#0000BB;    
}

Answer 1

我不相信有一种方法可以在不使用 JS 的情况下做到这一点。

您可以获得的最接近的目标是使用以下方法定位第三个元素:

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

您可以包含一个限定符，仅针对第三个子级(如果它是 .red)，如下所示:

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

http://jsfiddle.net/s76J3/3/