css选择混合列表中的每个第2个元素

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>