纯CSS实现列表颜色循环变化，多少个都可以实现

凯隐 2 4232 前端 1 0 2019-08-17 10:07

一切好的点子都是实践中磨练出来的，

CSS代码如下(3个颜色循环显示):

.flex-item:nth-child(3n+1){
	background-color:red;
}
.flex-item:nth-child(3n+2){
	background-color:green;
}
.flex-item:nth-child(3n+3){
	background-color:bule;
}

CSS代码如下(4个颜色循环显示):

.flex-item:nth-child(4n+1){
	background-color:red;
}
.flex-item:nth-child(4n+2){
	background-color:green;
}
.flex-item:nth-child(4n+3){
	background-color:blue;
}
.flex-item:nth-child(4n+4){
	background-color:yellow;
}