变量 nth 子项 (n) 与之前和之后

Question

如何使"1"变为可变/动态。 当我单击第二个按钮时，"1"将更改为"2">

#button li:nth-child(1) a {
background-color: #5cb85c;
}
#button li:nth-child(1) a:before {
border-color: #5cb85c;
border-left-color: transparent;
}
#button li:nth-child(1) a:after {
border-left-color: #5cb85c;
}

第一个 css 类正在使用

$("#button li:nth-child(2) a").css("background-color", "#5cb85c");

而 ：之前和 ：之后不是。

或任何其他解决方案都可以。 当我单击第二个按钮时，将应用相同的 css 集。在第 3 个按钮上。等等。

谢谢！

来自@giorgio的解决方案

最后，经过 giorgio 解决方案的大量尝试，以下是它基于我的示例 css 的工作方式。

.button-select a {
background-color: #5cb85c !important;
}
.button-select a:before {
border-color: #5cb85c !important;
border-left-color: transparent !important;
}
.button-select a:after {
border-left-color: #5cb85c !important;
}

我需要添加 ！important 以覆盖默认样式。 然后在我的点击上，

$('#buttons li').eq(n).toggleClass('button-select');

n是<ul id = "buttons"><li>指数

Answer 1

最简单的解决方案不是使用:nth-child()而是设置一些类并对其应用::before:/::after选择器。例如;

.background-red::before { background: red; }
.background-blue::before { background: blue; }

现在使用 jQuery/javascript 查找要更改的元素并切换类。例如;

$('.my-selector').eq(n).toggleClass('background-red');

更改伪选择器的问题在于它们不是DOM的一部分;您将无法直接更改它们。