四分之四的四分之一

Question

我需要为列表中的每四个元素应用一些样式：

现在我有：

.panel:nth-child(1) {background:#F0A46A;}
.panel:nth-child(2) {background:#EE8020;}
.panel:nth-child(3) {background:#BB6619;}
.panel:nth-child(4) {background:#887A4B;}

我希望此行为在第5,6,7,8（以及其他）中再次重复，与第1，第2，第3，第4相同

Answer 1

JSFiddle Demo

ul li:nth-child(4n +1) {background:red;}
ul li:nth-child(4n +2) {background:blue;}
ul li:nth-child(4n +3) {background:green;}
ul li:nth-child(4n +4) {background:orange;}

Answer 2

尝试在选择器中使用n。它将从0开始并浏览子元素列表。

Demo

.panel div:nth-child(4n+1) {background:#F0A46A;}
.panel div:nth-child(4n+2) {background:#EE8020;}
.panel div:nth-child(4n+3) {background:#BB6619;}
.panel div:nth-child(4n+4) {background:#887A4B;}