如何具有一系列不同的交替颜色

Question

我需要连续的类在被其他（连续的）类穿插时也具有交替的颜色。

因此第二张图片中的绿色bb second应该是蓝色的，如下所示

需要

现在

.first{
  color: red;
}

.first ~ .second:nth-child(even) {
  color: blue;

}

.first ~ .second:nth-child(odd){
color:green;
}

  <div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="first">aa first</div>
  <div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>

原始文本

  

有必要先将连续的类作为第一个，后一个第二种是交替的颜色，然后当找到第一个后继时，再次按图片类的顺序进行交替

Answer 1

将nth-child与n一起使用

.first{
  color: red;
}

.first ~ .second div:nth-child(even){
  color:green;
}

.first ~ .second div:nth-child(odd){
    color: blue;
}

<div class="first">aa first</div>
<div class="second">
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
<div class="second">
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
<div class="second">
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
</div>
<div class="first">aa first</div>

添加评论

.first{
  color: red;
}
.first + .second{
    color:blue;
}
.first + .second + .second{
    color:green;
}
.first + .second + .second + .second{
    color:blue;
}
.first + .second + .second + .second + .second{
    color:green;
} 
.first + .second + .second + .second + .second + .second{
    color:blue;
} 
.first + .second + .second + .second + .second + .second + .second{
    color:green;
} 
.first + .second + .second + .second + .second + .second + .second + .second{
    color:blue;
} 
.first + .second + .second + .second + .second + .second + .second + .second + .second{
    color:green;
} 
.first + .second + .second + .second + .second + .second + .second + .second + .second + .second{
    color:blue;
} 

<div class="first">aa first</div>
<div class="first">aa first</div>
<div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
<div class="first">aa first</div>

Answer 2

我了解您要在这里实现的目标。但是CSS是不可能的。

.second:nth-child(even)选择父元素内的所有偶数元素，并在其具有类second的情况下应用样式。因此，您无法选择.second的偶数或奇数元素。

1. 但是，您仍然可以尝试JS或jquery：对类second的所有元素运行循环，并将其应用于偶数和奇数元素。

2. 您也可以多次使用通用的同级选择器（~）来计数第n个元素，尽管如果您的数据是动态的，我也不建议这样做。
   在此处查看Ilya Streltsyn的答案：:nth-child(even/odd) selector with class
   或：https://jsfiddle.net/ssuryar/6ka13xve/

3. 每次使用.second并将其放在父div中

引用：

https://css-tricks.com/almanac/selectors/n/nth-child/

CSS3 selector to find the 2nd div of the same class

nth-child doesn't respond to class

希望这会有所帮助。干杯！