Question

我不确定这是否可以在CSS中使用，但如果是，我会很感激帮助。

我的HTML类似于以下内容：

<div class="group"></div>

<div class="group"></div>
<div class="group subgroup"></div>
<div class="row"></div>
<div class="row"></div>

<div class="group"></div>
<div class="group subgroup"></div>
<div class="row"></div>

是否可以替换行类的背景颜色？总是以相同的颜色开始？我一直无法使用n-child来实现这一目标，而且我因为小组/小组类而假设它。

可以返回的示例数据集的jsfiddle中的手动html标记以及如何设计样式： http://jsfiddle.net/Qr5Za/

Answer 1

'总是以相同的颜色开头'表示之后的第一行组/子组以红色
开头

如果是这样，您可以设置background-color红色.row和其他magenta的{{1}}：

.group ~ .row { /* select all rows comes after each group */
    background-color: magenta;
}

.group + .row { /* select and override the first row after each group */
    background-color: red;
}

<强> JSBin Demo

这些选择器称为通用兄弟组合器 ~和相邻兄弟组合器 +，您可以找到more details here。

更新

:nth-child(n)，:nth-of-type(n)等所有新的CSS3选择器都匹配n子项或类型的每个元素，其父的。

所以实现this的唯一方法是将.row放在每个块的包装器中：

<div class="group">This is a group</div> <div class="group subgroup">This is a subgroup</div> <div class="wrap"> <div class="row">This is the first row</div> <div class="row">This is the second row</div> <div class="row">This is the third row</div> <div class="row">This is the forth row</div> </div>

根据odd呃（他们的父母）中的位置选择even和.wrap行：

.row:nth-child(odd) { background-color: red; } .row:nth-child(even) { background-color: magenta; }

<强> JSBin Demo #2

Answer 2

.row:nth-of-type(n) + .row:nth-of-type(even){
  background: green;
}

.row:nth-of-type(n) + .row:nth-of-type(odd){
  background: orange;
}
.group.subgroup + .row:nth-of-type(n) {
  background: blue;
}

<强> Updated Demo

两个div之间的备用行颜色

2 个答案:

更新