Question

我的结构如下：

<div id="holder">
    <div id="first"></div>
    <div class="box">I'm the first</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Make this background orange!!!</div>
    <div id="last"></div>
</div>

我需要最后一个.box元素才能拥有橙色背景。

.box:last-child{}无效，因为它不是最后一个孩子。除了在元素中仅包装.box之外，还有什么方法可以做到这一点吗？这个问题确实代表了我正在尝试做的事情，但我也想知道是否有办法匹配选择器的最后一个匹配元素。

http://jsfiddle.net/walkerneo/KUa8B/1/

额外说明：

没有javascript
没有给最后一个元素一个额外的类

Answer 1

对不起，除了滥用兄弟组合器或:nth-last-child()的方式完全取决于你的HTML结构¹之外，目前单靠CSS选择器是不可能的。

这个非常有用的功能看起来会像:nth-last-match()一样添加到选择器4中，但在你的情况下会像这样使用：

:nth-last-match(1 of .box) {
    background: orange;
}

但是我不知道语法是否会改变，或者供应商何时会开始实现它，所以让我们暂时把它作为一种假设的理论 - 也许是现在的事情。

¹ _{这样的事情，因为你的上一个.box也是第二个孩子：}

.box:nth-last-child(2) {
    background: orange;
}

Answer 2

您可以为nth-last-of-type()提供解决方法

#holder > .box:nth-last-of-type(2) {
    background:orange;
}

Demo

然而，这也是完成这项工作的另一种方法

<div id="holder">
    <div id="first"></div>
    <div class="boxes">
        <div class="box">I'm the first</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Make this background orange!!!</div>
    </div>
    <div id="last"></div>
</div>

然后，您可以使用

.boxes .box:last-child {
    background:orange;
}

Demo

Answer 3

如果你知道你想要的橙色背景的盒子类总是倒数第二个，你可以使用这个css选择器。

.box:nth-last-of-type(2){
 background:orange;   
}

Answer 4

div:nth-last-child(2){
    background-color: orange; 
}

CSS匹配选择器的最后一个匹配？

4 个答案:

Demo

Demo