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

本文介绍了CSS定位最后一个不是最后一个孩子的类类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

不改变html 是否有任何方法使用CSS定位最后的 .red 类？

Without altering the html is there any way to target the last .red class using CSS?

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

推荐答案

是不使用JS的方法。

你可以得到的最接近的是第三个项目：

The closest you can get is to target the 3rd item with:

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

您可以包含一个限定符，像这样：

You can include a qualifier to only target the third child if it is .red like so:

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

这篇关于CSS定位最后一个不是最后一个孩子的类类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！