css - 如何获得:last-child element in a mixed group of selectors

Question

我有一个 [bootstrap/opencart] 生成的侧边栏导航，默认情况下它将当前类别和当前元素/产品标记为“事件”

我如何获得标记为“事件”的标签的 :last-child [这样我就可以给它们一个不同的表示]

见下文:

<div class="list-group">
    <a href="#" class="list-group-item">Road/Race (4)</a>
    <a href="#" class="list-group-item active">Off-Road (5)</a>
    <a href="#" class="list-group-item"> -> Aprilia (1)</a>
    <a href="#" class="list-group-item active"> -> BMW (0)</a>
    <a href="#" class="list-group-item"> ->Ducati (0)</a>
    <a href="#" class="list-group-item">Snow (0)</a>
    <a href="#" class="list-group-item">Downloads (0)</a>
</div>

我试过:

.list-group-item:last-child.active {
    background: #000 !important;
}
.list-group-item.active:last-child {
    background: #000 !important;
}
/* with and without the !important */

两个选择器都不起作用。

正确的语法是什么？

Answer 1

它不是很漂亮，但可能是这样的:

.list-group-item.active ~ .active 

我相信 ~ 将针对第一个 .active 之后的任何 .active。