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

Question

我想改变每个第二，第三和第四的背景颜色。

所以基本上我需要他们的顺序是：

绿，红，蓝，黑。

这是我的小提琴

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; 
} 

Answer 2

@ambs证明我错了，但无论如何，我会在这里离开这个作为一种替代。

---

我不认为这是可能的使用nth孩子在你尝试的方式。

你可以结合然而第n个孩子与相邻兄弟选择：

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

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

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

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

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

<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div> 
 

 
<div class="item"> 
 
</div> 
 

 

 
<div class="item"> 
 
</div>

Answer 3

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

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

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

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

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

这里的解决方案。无窍门