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

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包含元素中的's' 之外,还有什么方法可以做到这一点吗？这个问题确实代表了我正在尝试做的事情,但我也想知道是否有一种方法来匹配选择器的最后一个匹配元素.

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

额外说明:

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

Answer 1

对不起,除了滥用兄弟组合器或:nth-last-child()完全依赖于HTML结构^{1的方​​式},目前单独使用CSS选择器是不可能的.

这个非常:nth-last-match()有用的功能看起来会被添加到Selectors 4中,但是在你的情况下会像这样使用:

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

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

^1这样的 _{事情,因为你的上一个.box也是第二个孩子:}

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