Html 如何更改第n个div的背景色

我需要用class

cover internal

我试着跟随，但不起作用

.cover-wrapper .cover-inner:nth-of-type(4n+4) {
    background-color: yellow;
}
.cover-wrapper .cover-inner:nth-of-type(4n+5) {
     background-color: orange;
}

实际小提琴

将

n-of-type（）

放在

上。封套

：

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

由于每个

.cover-inner

都是其父级的唯一子级，因此您永远不会捕获它们

---

旁注：

• 使用

  ：第n个类型（4n）

  代替

  ：第n个类型（4n+4）

• 如果要每5个元素更改一次颜色，请使用

  ：第n种类型（5n）

  （当前，您正在每4+1个元素更改一次颜色）
• 使用

  ：第n个类型（1）

  或

  ：第一个类型（）

试试看：-

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

---

。封面包装器只有一个孩子。所以，用.cover内部类给.cover包装器中的第n个子类没有任何意义

您可以使用：nth child with.cover wrapper代替它

.cover wrapper{高度：20px；宽度：200px；背景色：蓝色；边距：10px；}
.封套：第一个孩子。封套内部{
背景颜色：绿色；
}
.封套：第n种类型（4n+4）。内封套{
背景颜色：黄色；
}
.封套：第n种类型（4n+5）。内封套{
背景颜色：橙色；
}

图像项
图像项
图像项
图像项
图像项
图像项
图像项
图像项
图像项
图像项
图像项
图像项
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4

谢谢，我怎么能用

更改背景色first div。封面包装：first-of-type（）。封面内部

做到了

。封面包装：第n个类型（1）。封面内部{背景色：红色；}