我有一个动态页面，用户可以根据需要在其他 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 实现吗？
这不是一个直接的答案，但如果您可以嵌套替代元素（例如 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
