html - 如何拥有一系列不同的交替颜色

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>

原文

It is necessary that consecutive classes are the first first and the next second was an alternating color, and then when back found first again alternated as the picture classes are in order necessary

Answer 1

将第n个 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>