Question

我试图根据他们的位置设计一系列div。我希望它们的样式，如下：

<div class="col33"></div> <!--  red -->
<div class="col33"></div>
<div class="col33"></div> <!--  orange -->

<div class="col33"></div> <!--  red -->
<div class="col33"></div>
<div class="col33"></div> <!--  orange -->

<div class="col33"></div> <!--  red -->
<div class="col33"></div>
<div class="col33"></div> <!--  orange -->

但我似乎只能得到每个第三个孩子：

.col33:nth-child(3n) {
    background-color: orange;
}

http://jsfiddle.net/UAj6h/3/

Answer 1

只需为3n+1 div

添加其他规则

.col33:nth-child(3n) {
    background-color: orange;
}
.col33:nth-child(3n+1) {
   background-color: red;
}

示例小提琴：http://jsfiddle.net/UAj6h/4/

作为旁注，您可以避免使用冗余.col33类，以减少标记大小并且您可以使用.parent-div > div

定位这些div

Answer 2

只需为您的红色div添加.col33:nth-child(3n-2)或.col33:nth-child(3n+1)。

.col33:nth-child(3n-2) {
    background: #ff4136;
}

DEMO

使用第n个孩子（每3 + 1）

2 个答案: