如何用tr:nth-child实现表格两行一组循环背景色样式？

嘿，我知道你要的是两行蓝色、两行白色循环的表格样式，之前用tr:nth-child没成功对吧？别担心，这就给你搞定！

问题根源 #

你想要的是「两行一组」的交替效果，而默认的odd/even是单行交替，所以得用更精准的nth-child公式来匹配每4行里的前两行和后两行。另外注意PowerShell生成的HTML里没有<tbody>，直接用table tr选择器就能覆盖所有行。

解决方案 #

打开你的table.css文件，替换成下面的代码：

/* 可选但推荐：给表头单独设置样式，和数据行区分开 */
table tr:first-child {
  background-color: #E0E0E0; /* 浅灰色，可自定义表头颜色 */
  font-weight: bold;
}

/* 匹配第2、3、6、7...个tr（每4行中的前两行），设置蓝色背景 */
table tr:nth-child(4n-2),
table tr:nth-child(4n-1) {
  background-color: #0078D7; /* 微软蓝，可替换成任意蓝色值 */
  color: #FFFFFF; /* 可选：白色文字提升蓝色背景的可读性 */
}

/* 匹配第4、5、8、9...个tr（每4行中的后两行），设置白色背景 */
table tr:nth-child(4n),
table tr:nth-child(4n+1) {
  background-color: #FFFFFF;
}

代码解释 #

• tr:first-child：专门选中表头行，设置不同的背景色和加粗，让表头更醒目，避免和数据行混淆。
• tr:nth-child(4n-2) & tr:nth-child(4n-1)：通过公式匹配每4行里的第2、3个<tr>（对应你的第1、2条数据行），设置蓝色背景。
• tr:nth-child(4n) & tr:nth-child(4n+1)：匹配每4行里的第4、5个<tr>（对应你的第3、4条数据行），设置白色背景，以此循环。

效果验证 #

对应你提供的示例HTML，最终样式会是：

• 表头：浅灰色加粗
• Gary、Sarah行：蓝色背景+白色文字
• Bob、Ian行：白色背景
• Susan、Robin行：蓝色背景+白色文字
• Paul、Jane行：白色背景
  完全符合你想要的两行一组循环效果！

如果不需要表头单独样式，直接删掉tr:first-child的代码块即可，表头会和第一行数据一起变成蓝色（根据需求调整）。

内容的提问来源于stack exchange，提问作者Alastair Cain