Css 如何获取：混合选择器组中的最后一个子元素

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

如何获取标记为“活动”的标记的：最后一个子项[以便我可以为它们提供不同的演示]

见下文：

<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.active ~ .active 

---

我相信

~

将针对第一个

.active

之后的任何

.active

。active

这并不漂亮，但可能类似于：

.list-group-item.active ~ .active 

---

我相信

~

将针对第一个

之后的任何
.active
。active

没有

n个类

，因此您可能必须依赖JS。没有

n个类

，因此您可能必须依赖JS。是的，但它不会只针对最后一个类。唯一的缺点是如果有超过两个。更好的解释方法是，除了第一个

.active

元素外，其他所有元素都将被选中，但这可能是OP真正需要的所有元素。我建议这样做，因为只有两个元素将具有.active类。但是是的，完全正确，它会选择第一个元素之后的所有活动元素。我应该提到这一点，并将尝试在未来的答案更彻底谢谢！如前所述，这不是一个完美的解决方案，但考虑到css无法完成这一确切的任务，并且问题没有给出

.active

类中有两个以上元素的情况，这是一个非常聪明的答案！看起来最多只能有2个活动项，因为引导和opencart都只支持2个级别的菜单项。坦率地说，opencart的实现非常差。因此，在这种特殊情况下，这种解决方案可能有效。是的，但它不会只针对最后一个。唯一的缺点是如果有两个以上。更好的解释方法是，除了第一个

.active

元素外，其他所有元素都将被选中，但这可能是OP真正需要的所有元素。我建议这样做，因为只有两个元素将具有.active类。但是是的，完全正确，它会选择第一个元素之后的所有活动元素。我应该提到这一点，并将尝试在未来的答案更彻底谢谢！如前所述，这不是一个完美的解决方案，但考虑到css无法完成这一确切的任务，并且问题没有给出

.active

类中有两个以上元素的情况，这是一个非常聪明的答案！看起来最多只能有2个活动项，因为引导和opencart都只支持2个级别的菜单项。坦率地说，opencart的实现非常差。因此，在这种特殊情况下，这个解决方案可能有效。