css第n个子项或第n个类型

我希望避免在自定义Wordpress模板中使用函数或循环来显示特定元素的不同背景颜色。我的问题是需要更改的容器及其父容器

每个第一、第四、第七等个人资料类的背景颜色都必须为蓝色。每第二、第五、第八等个人资料类需要有一个红色的背景色。每隔3、6、9等需要有一个绿色的背景色

我尝试过使用.profile:nth子类和.profile:nth类型的不同组合，但是在staff父类中只有2个类实例会重置背景颜色

现在我得到了这样的东西：

<div class="staff">
    <div class="profile">
    (blue)
    </div>
    <div class="profile">
    (red)
    </div>
</div>
<div class="staff">
    <div class="profile">
    (blue)
    </div>
    <div class="profile">
    (red)
    </div>
</div>
<div class="staff">
    <div class="profile">
    (blue)
    </div>
    <div class="profile">
    (red)
    </div>
</div>
....

（蓝色）
（红色）
（蓝色）
（红色）
（蓝色）
（红色）
....

当我想看到的是：

<div class="staff">
    <div class="profile">
    (blue)
    </div>
    <div class="profile">
    (red)
    </div>
</div>
<div class="staff">
    <div class="profile">
    (green)
    </div>
    <div class="profile">
    (blue)
    </div>
</div>
<div class="staff">
    <div class="profile">
    (red)
    </div>
    <div class="profile">
    (green)
    </div>
</div>
....

（蓝色）
（红色）
（绿色）
（蓝色）
（红色）
（绿色）
....

这有点复杂，但假设每个

.staff

元素最多只包含2个

.profile

元素，-即使

.staff

组开始重复：

.staff:nth-child(3n+1) .profile:nth-child(1),
.staff:nth-child(3n+2) .profile:nth-child(2) {
    background-color: blue;
}

.staff:nth-child(3n+1) .profile:nth-child(2),
.staff:nth-child(3n+3) .profile:nth-child(1) {
    background-color: red;
}

.staff:nth-child(3n+2) .profile:nth-child(1),
.staff:nth-child(3n+3) .profile:nth-child(2) {
    background-color: green;
}

---

请注意，

：nth-of-type（）

假设您的

，则不会产生任何影响。staff

元素是其父元素中唯一的

div

元素，因为

：nth-of-type（）

只查看标记名，并且所有的

。profile

元素也都是

div

。

非常感谢您的帮助。这非常有效。然而，我的客户回来了，希望通过添加另一个div-in，在工作中加入一个扳手，有效地使代码现在看起来像这样——这使每一个剖面块都具有所需的背景颜色。我试着编辑你的JSFIDLE，但没能让它工作。@ToddyBoy:啊，我在那里担心了一会儿，但它并不像看上去那么复杂。现在看起来每个

.profile

前面都有一张

.photo

。在这种情况下，只需将every

.profile:nth child（2）

更改为

。profile:nth child（4）

和every

。profile:nth child（1）

更改为

。profile:nth child（1）

。这里还有一把小提琴：

：nth-of-type（）

仍然没有什么区别，因为它们都是

div

s.Legend！真有魅力！