如何只用 css 循环一组颜色？

问题描述

问 题

rt, 我想只用 css 循环一组颜色作为一组 div 的背景，

大概样子就是这样

红 蓝 绿 黄 红
蓝 绿 黄 红 蓝
绿

四个颜色，按照顺序循环。

ps: 我尝试使用 nth-child 没有能解决。

解决方案

试了下 nth-child 应该是可以的。参考：

<div class="total-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- ... -->
</div>

.item{
    height: 20px;
    margin-bottom: 10px;
}
.item:nth-child(4n+1){
    background: red;
}
 .item:nth-child(4n+2){
    background: blue;
}
 .item:nth-child(4n+3){
    background: green;
}
 .item:nth-child(4n+4){
    background: yellow;
}

要点是这个n，它是非负整数，可以取0。

这篇关于如何只用 css 循环一组颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！