html - 用于交替嵌套元素背景颜色的循环 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、部分)，这里有一个如何使用纯 CSS 的想法。诀窍是使用 CSS 变量来控制 background-position 并为每个 child 增加它，以便将背景移动到下一个颜色。您需要替代元素才能实现递增，使用一个元素我们将有循环，但它不会起作用。

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