css - :last-child/last-of-type pseudo difficulties

Question

难以尝试将集合中的特定元素作为最后一个匹配的选择器。

<div class="items">
    <article class="today">
        this is today
    </article>
    <article class="today">
        this is today
    </article>
    <article class="today">
        this is today
    </article>
    <article>
        Not today
    </article>
    <article>
        Not today
    </article>
</div>

我的目标是重新设置最后一项 article.today 的样式。

article {
    background: cyan;
}

.today:last-child { 
    background: black;
    color: white;
}

它不起作用。 http://jsfiddle.net/nv54h/更改为:

article {
    background: cyan;
}

article:last-child { 
    background: black;
    color: white;
}

在最后一项现在是黑色的情况下确实有效。 http://jsfiddle.net/nv54h/1/ - 但如果不执行两个循环或不同的元素，我无法让它按预期工作(例如，last-of-type)

有没有什么方法可以让您想到仅针对最后一个 .today 元素？列表是通过动态集合的迭代生成的，该集合实时变化，因此仅 CSS/标记的解决方案将是完美的，如果元素 n+1 不是 today<，则避免逻辑和反向引用 等。我想 Sizzle 中的 :last 是一个理想的解决方案，但是......

Answer 1

我能想到的唯一方法是使用 javascript...

:last-child 和 :last-of-type 仅适用于元素，它们不会以您认为应有的方式关注类。通过删除没有类名的两篇文章，您的代码就可以工作了……

http://jsfiddle.net/nv54h/2/

---

使用一些 jQuery 你可以很容易地做到这一点:

$( "article.today:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });

http://jsfiddle.net/nv54h/3/

---

更好的是，只需添加一个类。这样，您的所有样式都可以保留在您的样式表中。

$( "article.today:last" ).addClass('black');

http://jsfiddle.net/nv54h/4/