html - 表格为行应用CSS

Question

我正在处理 html 表格，我需要在其中的行上添加背景颜色，但我在该行上没有任何类。我正在尝试使用第 nth-child，但我不确定我的逻辑。

我希望 2 行具有相同的背景颜色，接下来的 2 行应该具有如下图所示的背景颜色 2

tr:nth-child(2n) td {
  background-color: yellow
}

tr:nth-child(2n+1) td {
  background-color: pink
}

<table>
<tr><td>background should come as color1</td></tr>
<tr><td>background should come as color1</td></tr>

<tr><td>background should come as color2</td></tr>
<tr><td>background should come as color2</td></tr>

<tr><td>background should come as color1</td></tr>
<tr><td>background should come as color1</td></tr>

<tr><td>background should come as color2</td></tr>
<tr><td>background should come as color2</td></tr>
</table>

以上是为交替行提供背景颜色

Answer 1

tr {
  background-color: yellow
}

tr:nth-child(4n),
tr:nth-child(4n - 1){
  background-color: red
}

<table>

<tr><td>//background should come as color1</td></tr>
<tr><td>//background should come as color1</td></tr>

<tr><td>//background should come as color2</td></tr>
<tr><td>//background should come as color2</td></tr>

<tr><td>//background should come as color1</td></tr>
<tr><td>//background should come as color1</td></tr>

<tr><td>//background should come as color2</td></tr>
<tr><td>//background should come as color2</td></tr>

</table>