在后台管理系统和数据分析页面中，表格是最常用的信息载体。当行数达到几十甚至上百行时，用户的视觉容易在横向阅读中串行。常见的双行斑马纹以两行为周期交替着色，但在某些业务里，数据是按每三条记录归为一组进行展示的，比如监控指标的三级分类、订单的三日流水等。此时如果仍用双行条纹，组与组的边界就不够清晰。用CSS结构伪类可以很自然地让表格以三行为一个周期渲染底色，不需要任何JavaScript参与。
理解:nth-child在表格行上的匹配逻辑
CSS的:nth-child(an+b)伪类是根据元素在其父容器中的兄弟位置来选元素的。对于表格来说，如果我们将数据行放在<tbody>中，那么每一行<tr>都是<tbody>的子元素。选择器tbody tr:nth-child(3n)表示选中位置为3、6、9……的行，也就是每三行里的第三行；tbody tr:nth-child(3n+1)选中的是1、4、7……也就是每组的第一行。这种位置计算完全由浏览器在渲染时完成，不依赖DOM脚本。
需要注意的是，如果表头<thead>里的<tr>也写在同一个父级之下，那么计数会被表头占用。因此推荐把表头放在<thead>、数据放在<tbody>，这样tbody tr的计数从数据第一行开始，不会偏移。另外:nth-child计算的是所有标签为<tr>的兄弟，若<tbody>内混入了其他标签则不影响tr的排序，但可读性会变差，应保持结构纯净。
除了3n与3n+1，还可以组合使用:nth-child(n+1):nth-child(-n+3)这种区间写法，但针对周期性样式，直接用步长公式更直观。我们也可以给每组的第一行加左侧边框、最后一行加底部边框，从视觉上“框”出三组结构，这比单纯换底色更利于扫读。
纯CSS实现每三行斑马纹的完整代码示例
下面给出一个最简但完整的HTML加CSS示例。我们在<style>中先清除默认间距，然后针对tbody tr使用三组选择器分别定义背景。为了突出“每三行一个斑马纹”，我们让第一行浅灰、第二行白、第三行浅蓝，形成明显循环。你也可以只让其中一行着色，其余透明，那就成了“每三行标记一次”的变体。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>三行斑马纹表格</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; border: 1px solid #ddd; }
/* 每组第一行 */
tbody tr:nth-child(3n+1) { background-color: #f5f5f5; }
/* 每组第二行保持默认白底 */
tbody tr:nth-child(3n+2) { background-color: #ffffff; }
/* 每组第三行 */
tbody tr:nth-child(3n) { background-color: #e8f0fe; }
</style>
</head>
<body>
<table>
<thead>
<tr><th>编号</th><th>名称</th><th>数值</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>项目A</td><td>10</td></tr>
<tr><td>2</td><td>项目B</td><td>20</td></tr>
<tr><td>3</td><td>项目C</td><td>30</td></tr>
<tr><td>4</td><td>项目D</td><td>40</td></tr>
<tr><td>5</td><td>项目E</td><td>50</td></tr>
<tr><td>6</td><td>项目F</td><td>60</td></tr>
</tbody>
</table>
</body>
</html>
上述代码中，:nth-child(3n+1)匹配第1、4行，3n+2匹配第2、5行，3n匹配第3、6行，正好构成三行一循环。如果你希望“每三行整体换一次色”，即第1到3行一种色、第4到6行另一种色，可以把选择器改为tbody tr:nth-child(6n+1)、6n+2、6n+3归为一组A，6n+4到6n+6归为组B，这其实是双组大周期，写法类似。
在兼容性方面，:nth-child已被IE9及以上、所有现代浏览器支持，生产环境可放心使用。若项目还需兼顾极老内核，可以用脚本给行加class兜底，但绝大多数情况纯CSS足够。调试时建议先在浏览器开发者工具里选中某一行<tr>，确认其属于<tbody>而非<table>直接子级，否则计数器会包含<thead>里的行。
灵活调整周期与样式的实用技巧
业务需求常常变动：今天要三行一斑马，明天可能改四行。此时只需把选择器中的数字3统一替换成变量思路上的步长。例如四行一组就写4n+1、4n+2、4n+3、4n。如果只想高亮每组首行，其他行不变，那仅保留tbody tr:nth-child(3n+1)一条规则即可，其余行继承默认背景，性能与维护成本都最低。
还可以结合悬停态增强体验：在斑马纹基础上加tbody tr:hover让鼠标所在行高亮，由于:hover优先级高于:nth-child，悬停时会自然覆盖底色，移开恢复。若使用CSS预处理器如Sass，可用循环生成步长样式，避免重复书写。示例中若引入$step: 3;再@for循环，就能一行参数切换周期，适合有多套皮肤的后台系统。
最后提醒，当表格使用border-collapse: collapse时，某些浏览器下<tr>的背景色会被<td>的边框绘制影响，若出现缝隙可改为border-spacing: 0并在<td>上设底边框。总体来看，用CSS结构伪类控制表格每三行斑马纹是一种零依赖、易维护、可读性强的方案，掌握位置计算公式就能应对各种分组着色场景。