推荐使用 tbody tr:nth-child(even) 实现斑马纹，因其按 DOM 顺序计数更可靠；必须配合 border-collapse: collapse 避免白缝；注意 WCAG 对比度及 rowspan 导致的错位问题。
直接用 tr:nth-child(even) 或 tr:nth-child(odd) 就能实现，不需要 JS，也不用手动加 class。
为什么选 nth-child 而不是 nth-of-type
多数情况下两者效果一样，但 tr:nth-child(even) 更可靠——它按 DOM 顺序数所有 tr 元素，不管是不是在 tbody 里；而 tr:nth-of-type(even) 只数同类型兄弟元素，在有 thead、tfoot 或嵌套 tr（比如某些模板引擎生成的结构）时容易错位。
常见错误现象：表头（thead 中的 tr）也被着色，或者第一行数据变成白色（本该是浅灰），就是因为没限定作用范围。
- 推荐写法：
tbody tr:nth-child(even)—— 只对tbody内的数据行生效 - 避免写法：
tr:nth-child(even)—— 会把thead和tfoot的行也计入计数 - 如果表格没有显式
tbody，浏览器会自动包裹，但显式写出更可控
border-collapse: collapse 必须配着用
不设这个，tr 的背景色会被默认的单元格边框隔开，出现白缝，斑马纹就断开了。
立即学习“前端免费学习笔记（深入）”；
性能影响很小，但兼容性要注意：IE7+ 支持，老 IE（6）不支持 nth-child，但这类浏览器现在基本可忽略。
- 必须加：
table { border-collapse: collapse; } - 同时建议给
td和th设border-bottom而非border，避免重复边框叠加 - 如果用了
box-shadow或圆角，border-collapse是前提，否则样式会错位
颜色和可访问性容易被忽略的点
浅灰配纯白看着舒服，但对比度可能低于 WCAG 4.5:1 标准，尤其对视力弱用户。别只看“好不好看”，先看“能不能看清”。
动态内容更新后，新插入的 tr 会自动继承样式——这是 nth-child 的优势，但前提是插入位置正确（比如 append 到 tbody 末尾）。
- 推荐背景色组合：
#f9f9f9（偶数行） +#ffffff（奇数行），或#f0f8ff+#ffffff - 避免用
rgba()半透色——父容器若有背景图或色，会导致斑马纹变脏 - 悬停状态（
tr:hover）要覆盖掉背景色，否则颜色叠加会糊成一团
最麻烦的其实是合并单元格（rowspan）——nth-child 完全不感知它，视觉上“空行”仍参与计数，导致条纹错位。这种场景只能切回 JS 控制类名，或者重构表格结构。
