html - 对于第 n 个子循环，更改嵌套在不同级别的文章元素的样式

Question

对于每篇文章，如果元素嵌套在不同级别，我如何循环使用一组 6 种背景颜色？

这是否可以通过 CSS 实现，或者我是否必须为每篇文章添加一个类名 (.loop1-6)？我不想走 JS 路线。

article:nth-child(6n+1) {
  background: red;
}

article:nth-child(6n+2) {
  background: blue;
}

article:nth-child(6n+3) {
  background: orange;
}

<div class="home">
  <div>
    <article>1 - red</article>
  </div>
  <div>
    <article>2 - blue</article>
  </div>
  <div>
    <article>3 - orange</article>
  </div>
  <div>
    <div>
      <article>4 - green</article>
    </div>
    <div>
      <article>5 - purple</article>
    </div>
    <div>
      <article>6 - pink</article>
    </div>
  </div>
  <!-- ...loop repeats... -->
  <div>
    <article>1 - red</article>
  </div>
</div>

Answer 1

我假设您在上面的代码中输入的顺序是它将保留的顺序。

.home > div:nth-child(4n + 1) {
    color:red;
}

.home > div:nth-child(4n + 2) {
    color:blue;
}

.home > div:nth-child(4n + 3) {
    color:orange;
}

.home > div:nth-child(4n + 4) {
    color:green;
}

.home > div > div:nth-child(2) {
    color:purple;
}

.home > div > div:nth-child(3) {
    color:pink;
}

<div class="home">
    <div>
        <article>1 - red</article>
    </div>
    <div>
        <article>2 - blue</article>
    </div>
    <div>
        <article>3 - orange</article>
    </div>
    <div>
        <div>
            <article>4 - green</article>
        </div>
        <div>
            <article>5 - purple</article>
        </div>
        <div>
            <article>6 - pink</article>
        </div>
    </div>
    <!-- ...loop repeats... -->
    <div>
        <article>1 - red</article>
    </div>
    <div>
        <article>2 - blue</article>
    </div>
    <div>
        <article>3 - orange</article>
    </div>
    <div>
        <div>
            <article>4 - green</article>
        </div>
        <div>
            <article>5 - purple</article>
        </div>
        <div>
            <article>6 - pink</article>
        </div>
    </div>
    <div>
        <article>1 - red</article>
    </div>
    <div>
        <article>2 - blue</article>
    </div>
    <div>
        <article>3 - orange</article>
    </div>
    <div>
        <div>
            <article>4 - green</article>
        </div>
        <div>
            <article>5 - purple</article>
        </div>
        <div>
            <article>6 - pink</article>
        </div>
    </div>
    <div>
        <article>1 - red</article>
    </div>
    <div>
        <article>2 - blue</article>
    </div>
    <div>
        <article>3 - orange</article>
    </div>
    <div>
        <div>
            <article>4 - green</article>
        </div>
        <div>
            <article>5 - purple</article>
        </div>
        <div>
            <article>6 - pink</article>
        </div>
    </div>
</div>

fiddle demo