如何为表格设置7行白色、7行灰色交替的着色样式？

嘿，要实现这种每7行一组交替白灰的效果，咱们只需要调整CSS里的:nth-child选择器逻辑就行。你原来的代码是从第7行之后全部设为灰色，现在要改成**14行一个周期（7白+7灰）**的循环，具体做法如下：

修改后的完整CSS代码 #

<style>
#font{ 
  font-size: 20px; 
  color:#0000cd; 
} 
table { 
  border-spacing: 0; 
}
/* 默认所有行背景为白色 */
tr {
  background-color: white;
}
/* 每14行周期里的第8-14行设置灰色，循环生效 */
tr:nth-child(14n + 8),
tr:nth-child(14n + 9),
tr:nth-child(14n + 10),
tr:nth-child(14n + 11),
tr:nth-child(14n + 12),
tr:nth-child(14n + 13),
tr:nth-child(14n + 14) {
  background-color: #d3d3d3;
}
</style>

代码解释 #

• 首先给所有表格行默认设置白色背景，确保基础样式统一；
• 核心逻辑是14n + x这个公式：
  • 14n代表周期长度（7白+7灰=14行），n会从0开始自动递增（0、1、2...）；
  • +8到+14表示每个周期里的后7行，对应第8-14行、22-28行、36-42行……以此类推，这些行都会被设为灰色；
• 这样就完美实现了7白、7灰、7白、7灰的循环着色效果，不管表格有多少行都能自动适配。

如果你觉得写7个选择器有点繁琐，也可以用更简洁的范围写法（不过兼容性和可读性稍差一点）：

tr:nth-child(n+8):nth-child(-n+14),
tr:nth-child(n+22):nth-child(-n+28),
tr:nth-child(n+36):nth-child(-n+42) {
  background-color: #d3d3d3;
}

但这种写法需要手动添加每个周期的范围，不如第一种公式写法灵活，推荐用第一种哦。

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