更改每个第2和第3和第4个元素的背景颜色？

Question

我正在尝试更改每个第2，第3和第4的背景颜色。

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

绿色，红色，蓝色，黑色。

这是我的小提琴

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-child不会像你尝试的那样。

然而，你可以将nth-child与相邻的兄弟选择器结合起来：

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

这是一个解决方案。没有技巧