Question

不改变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，我不相信有办法做到这一点。

您可以获得的最接近的目标是使用以下内容定位第3项：

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

你可以包含一个限定符，只针对第三个孩子，如果它是.red就像这样：

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

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

Answer 2

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

然而，如果您的上一个.red有时处于不同的位置，而您根本无法更改HTML，那么您将不得不依赖一些轻量级的JS / jQuery。

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

您可以使用它将另一个类添加到上一个.red，并在CSS中引用它。

http://jsfiddle.net/s76J3/2/

HTH

Answer 3

：最后类型说明

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;    
}

然后你会得到一个有效的代码。

http://jsfiddle.net/s76J3/4/

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

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

3 个答案: