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

Question

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

这可能是CSS还是我必须为每篇文章（.loop1-6）添加一个类名？我宁愿不去JS路线。

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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