循环CSS规则，可交替使用嵌套元素的背景色

Question

我有一个动态页面，用户可以在其中根据需要在其他div中添加尽可能多的div。每个div都有背景颜色，我希望背景颜色每3 div重复一次。

当前，我正在编写这样的CSS规则

div {
  padding-top: 20px;
  margin-left: 10px;
}

div {
  background-color: blue;
}

div>div {
  background-color: red;
}

div>div>div {
  background-color: green;
}

div>div>div>div {
  background-color: blue;
}

div>div>div>div>div {
  background-color: red;
}

div>div>div>div>div>div {
  background-color: green;
}

div>div>div>div>div>div>div {
  background-color: blue;
}


/* and it continues... */

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

还有使用CSS的另一种方法吗？

Answer 1

这不是直接的答案，但是如果您可以嵌套备用元素（例如div，例如section），这是一个如何使用纯CSS的想法。诀窍是使用CSS变量控制background-position，然后为每个孩子增加它，以便将背景移到下一个颜色。您需要替换元素才能实现增量，其中一个元素将具有循环，它将无法正常工作。

:root {
 --i:1;
 --j:1;
}

div,section {
  padding-top: 20px;
  margin-left: 10px;
  background: 
    repeating-linear-gradient(to bottom, 
      blue 0, blue calc(100%/3), 
      red calc(100%/3), red calc(2*100%/3), 
      green calc(2*100%/3), green 100%);
  background-size:100% 300%;
}
section {
 --j:calc(var(--i) + 1);
 background-position:0 calc(var(--j) * 100%);
}

div {
 --i:calc(var(--j) + 1);
 background-position:0 calc(var(--i) * 100%);
}

<div>
  <section>
    <div>
      <section>
        <div>
          <section>
            <div>

            </div>
          </section>
        </div>
      </section>
    </div>
  </section>
</div>