html - 如何更改第n个div的背景颜色

Question

我需要用 cover-inner 类更改第 1、每 4 和每 5 个 div 的背景颜色

我试过跟随但它不起作用

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

实际 fiddle http://jsfiddle.net/gfLPG/1/

Answer 1

将 nth-of-type() 放在 .cover-wrapper 上:

.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 都是其父级的唯一子级，所以您永远抓不到它们。

---

旁注:

• 使用 :nth-of-type(4n) 代替 :nth-of-type(4n+4)
• 如果你想改变每 5 个元素的颜色，请使用 :nth-of-type(5n)(目前，你正在改变每 4th+1 个元素的颜色)
• 使用 :nth-of-type(1) 或 :first-of-type() 定位第一个元素