对于第 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>

小提琴演示