4

我不确定这在 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>

是否可以交替行类的背景颜色？总是从相同的颜色开始？我一直无法使用 nth-child 实现这一点，我假设这是因为组/子组类。

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

4

2 回答 2

4

'总是以相同的颜色开始' 意味着组/子组之后的第一行以红色开始

如果是这样，您可以通过以下方式设置background-color第一个.row红色和其他红色magenta：

.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 演示

这些选择器称为通用兄弟组合 ~器和相邻兄弟组合 +器，您可以在此处找到更多详细信息。

更新

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

因此，实现这一点的唯一方法是将.rows 放入每个块的包装器中：

<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>

并根据它们在er （它们的父级）中的位置来选择odd和行：even.wrap

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

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

JSBin 演示 #2

于 2013-08-15T19:31:00.327 回答
1 
.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;
}

更新的演示

于 2013-08-15T19:22:12.033 回答