CSS 选择混合列表中的每个第二个元素

Question

有很多这种性质的问题，但我找不到以下解决方案：

<div class="row"></div>
<div class="noRow"></div>
<div class="row"></div>
<div class="noRow"></div>
<div class="row"></div>
<div class="noRow"></div>
<div class="row"></div>
<div class="noRow"></div>
...

我想更改每秒的背景颜色.row

我试过：

.row:nth-child(odd)

什么都没有改变

.row:nth-child(even)

更改所有.row元素的背景颜色

Answer 1

使用 .row:nth-child(4n - 1) 或 .row:not(:nth-child(4n + 1)) 。

.row:nth-child(4n - 1) {
  background-color: red;
}

<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>