着色某些类的交替div

Question

我的代码如下：

HTML

batik.jar

CSS

<div class="divs">
  <div class="row">row 0</div>
  <div class="not-row"></div>
  <div class="row">row 1</div>
  <div class="not-row"></div>
  <div class="row">row 2</div>
  <div class="not-row"></div>
  <div class="row">row 3</div> 
  <div class="not-row"></div>
</div>

这应该绘制两行灰色和两行白色的背景。不幸的是，它将所有背景描绘成灰色。我做错了什么？

我尝试使用.row:nth-child(even) { background: #fff; } .row:nth-child(odd) { background: #eee; } 代替nth-of-type，但这并没有改变任何内容。

jsFiddle example

Answer 1

即使只是使用（默认）

.row {}

然后用：

覆盖奇数

.row:nth-child(4n+1) {}

.row {
    background: #fff;
}
.row:nth-child(4n+1) {
   background: #eee;
}

http://jsfiddle.net/b8ma1hon/3/

有关nth-child工作原理的更多信息，请点击此处：

https://css-tricks.com/how-nth-child-works/

您不能简单地在此实例中使用even / odd，因为这与所有子元素相关，而不仅仅是类row的元素。

您在选择器中加入.row纯粹是一个额外的标准，对nth-child选择器没有任何影响。

同样我可以说：

.row:nth-child(1):hover {}

这会限制对具有row类的元素的选择，该类是第二个子节点，当前处于悬停状态。

如果这是所有悬停元素中的第二个元素是没有意义的，因为你一次只能悬停在一个元素上。

我希望这是有道理的！

值得注意的是，您的选择器现在依赖于not-row现有的，或者至少存在于row元素之间的某种元素。

如果要更改，那么您的选择器也必须更改。

或者，您可以将not-row元素的元素类型更改为其他元素，以便您可以使用nth-of-type选择器：

<div class="divs">
    <div class="row">row 0</div>
    <span class="not-row"></span>
    <div class="row">row 1</div>
    <span class="not-row"></span>
    <div class="row">row 2</div>
    <span class="not-row"></span>
    <div class="row">row 3</div> 
    <span class="not-row"></span>
</div>

.row {
    background: #fff;
}
.row:nth-of-type(odd) {
   background: #eee;
}

http://jsfiddle.net/b8ma1hon/5/