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

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

這裏的解決方案。無竅門