html - 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{} 将不起作用，因为它不是最后一个 child 。除了仅将 .box 包装在一个元素中之外，还有什么办法可以做到这一点吗？这个问题确实代表了我正在尝试做的事情，但我也想知道是否有一种方法可以匹配选择器的最后一个匹配元素。

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

补充说明:

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

Answer 1

抱歉，除了以完全依赖于您的 HTML 结构的方式滥用兄弟组合器或 :nth-last-child() 之外，目前无法使用单独的 CSS 选择器。

这个功能看起来将作为 :nth-last-match() 添加到 Selectors 4 中, 不过，在您的情况下，可以这样使用:

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

但我不知道语法是否会发生变化，或者供应商何时会开始实现它，所以让我们暂时将其作为一种假设-理论上​​-可能的事情。

---

¹ _{像这样，假设你的最后一个 .box 也是倒数第二个 child :}

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