Html 突出显示最后一个元素的类名的下一个元素-CSS3

使用下面的代码，我能够突出显示值为2和3的元素，而不是元素3。我尝试使用last child和nth last类型，但没有达到预期效果。问题在于突出显示类的下一个元素-活动，并将闪烁应用于勾号3和值3，以及活动类的更改以更改闪烁

没有Jquery解决方案，因为目前正在尝试使用CSS3实现

我正在尝试选择hightlight类的第一个元素，而不是仅使用CSS的活动类

HTML:

---

方法1:Jquery 您可以使用jquery这样做

$(".active:last").next().addClass("blink")

并将css更改为具有blink类

.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}

方法2: 如果你只想使用css，你需要保留你的最后一个元素 通过向最后一个元素添加类，比如说

.last

 <div style="width:2%;float:left;">
     <div class="highlight active">1</div>
     <div class="highlight active last">2</div>
     <div class="highlight">3</div>
     <div class="highlight">4</div>
 </div>

方法3:

将css更改为

   div.active + div:not(.active){
    color: white;
    background: white;
    animation: blink 2s steps(2, start) infinite;
    }

基本上，它会发现在它之前有类处于活动状态的元素和下一个没有类处于活动状态的类

---

您可以使用第n种类型来代替：

.highlight + .highlight:not(.active):nth-of-type(3) {

片段：

。突出显示{
颜色：白色；
宽度：20px；
高度：20px；
边界半径：50%；
背景：rgb（234116,0）；
显示：内联块；
文本对齐：居中；
}
.主动{
背景：绿色；
}
@关键帧闪烁{
到{
背景：rgb（234116,0）；
}
}
.highlight+。highlight:未（.active）：第n个类型（3）{
颜色：白色；
背景：白色；
动画：闪烁2s步（2，开始）无限；
}

1.
一
2.
二
3.
三
3.
四
1.
2.
3.
4.

谢谢，但在CSS3中是否有可能，并尝试使用CSS3而不使用jQueryTanks Imperfectluck来实现，最后一步是可行的，但同样，我需要使用jquery，在选择活动更改和相应更改闪烁时。有没有办法让元素2的类处于活动状态并应用blink以3检查最后一个元素，只使用CSS3而不使用任何jquery。如果我更改活动类，它将不起作用，需要在cssyes gaetonM中添加所有条件，我正在尝试选择hightlight类的第一个元素，但不使用CSS Only活动类。看起来您使用glyphicon类的次数太多了。。。另外，你能稍微澄清一下你的问题吗？很难理解你的要求。Matt，我正在尝试使类的下一个元素处于活动状态闪烁，如果value1元素处于活动状态，闪烁2，如果value2元素处于活动状态，则闪烁3，简而言之，我正在尝试选择hightlight类的第一个元素，而不使用CSS仅使用活动类

.last + .highlight {
   color: white;
   background: white;
   animation: blink 2s steps(2, start) infinite;
}

   div.active + div:not(.active){
    color: white;
    background: white;
    animation: blink 2s steps(2, start) infinite;
    }

.highlight + .highlight:not(.active):nth-of-type(3) {