如何在含嵌套行的NBA比分表格中实现行颜色交替

问题描述 #

为NBA实时比分网站设置表格时，每场比赛对应两行（一行显示队伍/比分，一行显示比赛节次），需要让每组的两行背景色保持一致，组与组之间交替显示不同背景色。当前使用的tr:nth-child(3n+0)无法实现需求。

解决方案 #

修改CSS的nth-child选择器，针对每2行一组的结构，设置两组选择器分别控制奇数组和偶数组的背景色：

/* 奇数组（第1、3、5...场比赛）的两行统一深色背景 */
tbody tr:nth-child(4n-3),
tbody tr:nth-child(4n-2) {
    background-color: #1b1b1b;
    color: #fff;
}

/* 偶数组（第2、4、6...场比赛）的两行统一另一种背景色（可根据需求调整） */
tbody tr:nth-child(4n-1),
tbody tr:nth-child(4n) {
    background-color: #2d2d2d;
    color: #fff;
}

原理说明 #

nth-child(an+b)的核心是周期+偏移：

• 每组2行，完成一次颜色交替需要覆盖4行（2行深色组 + 2行另色组），因此周期a=4
• 4n-3：n从1开始，对应第1、5、9...行（每组的第一行）
• 4n-2：对应第2、6、10...行（每组的第二行），和上一个选择器组合实现同组两行同色
• 4n-1：对应第3、7、11...行（下一组的第一行）
• 4n：对应第4、8、12...行（下一组的第二行），实现下一组两行同色且与前一组颜色区分

简化方案（按需选择） #

如果表格默认背景为浅色，只需给奇数组添加深色背景，偶数组保留默认，可简化CSS为：

tbody tr:nth-child(4n-3),
tbody tr:nth-child(4n-2) {
    background-color: #1b1b1b;
    color: #fff;
}

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