如何只用 css 循环一组颜色?
本文介绍了如何只用 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屋!
查看全文