html - CSS - 如何为奇数和偶数div着色？

Question

这个问题已经有了答案：
Using CSS :even and :odd pseudo-classes with list items
8个答案
我想使用CSS来实现以下效果，而不需要像这样硬编码。

.colour-blue {
  color:blue;
}
.colour-light-blue {
  color:lightblue;
}

<div class="activeContent">
  <div class="content">
    <div class="colour-blue">
      odd div
    </div>
  </div>
  <div class="content">
    <div class="colour-light-blue">
      even div
    </div>
  </div>
  <!-- and more (content) div -->
</div>

如何使用纯CSS？我想避免手动为每个分区分配颜色类

Answer 1

你可以这样做：

.content:nth-child(odd)>div {
  background: blue;
}

.content:nth-child(even)>div {
  background: red;
}

.content {
  width: 200px;
  height: 200px;
}

<div class="activeContent">
  <div class="content">
    <div class="colour-blue">
      stuff
    </div>
  </div>

  <div class="content">
    <div class="colour-light-blue">
      some more stuff
    </div>
  </div>
</div>

我想这会很有效的。