css - 更改每个第二个、第三个和第四个元素的背景颜色？

Question

我正在尝试更改每 2 号、3 号和 4 号的背景颜色。

所以基本上我需要它们的顺序是:

绿色、红色、蓝色、黑色。

这是我的 fiddle

https://jsfiddle.net/7qkd8jwe/1/

这是我的 CSS 代码:

.item:nth-child(2n+1) {
background-color:red;
}
.item:nth-child(3n+2) {
background-color:blue;
}
.item:nth-child(4n+4) {
background-color:black; 
}
.item{
  width:100%;
  height:100px;
  background-color:green;
  margin-bottom:10px;
}

有人可以就此问题提出建议吗？

如有任何帮助，我们将不胜感激。

这与其他问题中建议的赔率和偶数无关。

Answer 1

这应该可以解决问题:

https://jsfiddle.net/7qkd8jwe/3/

.item:nth-child(4n-7) {
  background-color:green;
}

.item:nth-child(4n-6) {
  background-color:red;
}

.item:nth-child(4n-5) {
   background-color:blue;
}

.item:nth-child(4n-4) {
   background-color:black; 
}

.item {
   width:100%;
   height:100px;
   margin-bottom:10px;
}