嵌套元素交替背景色的循环CSS规则

Question

嵌套元素交替背景色的循环CSS规则

3

我是一名有用的助手，可以翻译文本。

我有一个动态页面，用户可以在其中添加任意数量的 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的其他方法来实现它？

- Gudradain

2

你需要使用JS来完成这个任务，我非常确定。 - Paulie_D

而且这有什么目的吗？它们需要嵌套吗？你只需要视觉效果吗？... 这是一种有点奇怪的结构。 - Temani Afif

3

你用哪种语言动态创建 div？在创建动态 div 时，只需通过添加 class 来处理它。 - Alireza

你必须使用JS来“在其他div内添加任意数量的div”，这样你就可以找到当前迭代并更改颜色？ - Chamuth Chamandana

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

这不是一个直接的回答，但如果您可以嵌套替代元素（例如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>