CSS匹配选择器的最后一个匹配？ [英] CSS to match the last match of a selector?

问题描述

我有以下结构：

<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>​

我需要最后一个。框元素具有橙色背景。

I need the last .box element to have an orange background.

.box：last-child {} 将无法工作，因为它不是最后一个孩子。除了在一个元素中只包含 .box ，有什么办法吗？这个问题代表我想要做的，但我也想知道是否有一种方法匹配选择器的最后匹配的元素。

.box:last-child{} won't work because it isn't the last child. Apart from wrapping only the .box's in an element, is there any way to do this? This problem does represent what I'm trying to do, but I'd also like to know if there is a way to match the last matched element of a selector.

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

额外备注：

• 无javascript


• 最后一个元素一个额外的类

推荐答案

对不起，除了滥用同级组合器或：nth-​​last-child（），完全取决于你的HTML结构 ¹ ，它目前不能单独使用CSS选择器。

Sorry, aside from abusing sibling combinators or :nth-last-child() in a way that depends fully on your HTML structure¹, it's currently not possible with CSS selectors alone.

这个特性看起来像添加到选择器4 ：nth-​​last-match（） ，在你的情况下会像这样使用：

This very feature looks slated to be added to Selectors 4 as :nth-last-match(), though, which in your case would be used like this:

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

但我不知道语法是否会改变，

But I don't know if the syntax is going to change or when vendors will start implementing it, so let's just leave that as a hypothetical-theoretical-maybe kind of thing for now.

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

这篇关于CSS匹配选择器的最后一个匹配？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！