tr:nth-child(even)不生效主因是thead、caption等干扰dom计数，应限定为tbody tr:nth-child(even)；nth-child按所有子元素位置计数，nth-of-type仅计同类型元素。
nth-child(even) 为什么有时不生效
直接写 tr:nth-child(even) 却没变色，大概率是 HTML 结构里 tr 前面混入了 thead 或 caption 这类非 tbody 子元素。浏览器按 DOM 树中所有兄弟元素统一编号，thead > tr 也会被算进“第1个”“第2个”，导致后续 tbody > tr 的序号错位。
解决办法是限定作用范围：
- 给表格加
class="striped"，用.striped tbody tr:nth-child(even) - 或直接写
tbody tr:nth-child(even)（前提是确保tbody存在且没被省略） - 避免依赖
table tr:nth-child(even)这种宽泛选择器
nth-child(even) 和 nth-of-type(even) 的区别在哪
nth-child(even) 看的是父元素下所有子元素的顺序位置；nth-of-type(even) 只看同类型（比如只数 tr）的顺序。对标准表格而言，两者效果常一样，但一旦有 th 行、tr 外的注释或空格文本节点，nth-child 就容易出错。
更稳妥的做法：
- 显式包裹
tbody，并用tbody > tr:nth-child(even) - 或改用
tbody > tr:nth-of-type(even)，它对中间插入的th或其他标签更鲁棒 - 注意：IE8 不支持
nth-of-type，如需兼容，得用 JS 或 class 手动标记
隔行变色影响可访问性吗
单纯背景色变化本身没问题，但必须检查对比度。浅灰配白底（比如 #f5f5f5）在低亮度屏幕或弱视用户眼里可能难区分行边界。
- 用工具测一下文字与背景的对比度，至少要达到 WCAG AA 级（4.5:1）
- 别只靠颜色区分——加细边框（
border-bottom: 1px solid #eee）或微调行高，能强化视觉节奏 - 悬停时重置背景色（
tr:hover { background: #eef7ff }），避免 hover 覆盖隔行色后失去行定位感
遇到合并单元格（rowspan/colspan）怎么办
nth-child 完全不感知表格语义，只按 DOM 顺序走。哪怕某行因 rowspan=3 实际占三行高度，它仍只算作一个 tr 节点，不影响后续序号计算。所以合并单元格本身不会破坏隔行色逻辑。
但视觉上可能出问题：
- 长
rowspan行拉高后，相邻两行颜色相同，看起来像“断层” - 解决方案不是改 CSS，而是调整设计：给
rowspan行单独加背景（tr[role="group"] { background: #f9f9f9 }），或统一用 border 分隔 - 切忌为了“对齐颜色”而手动加 class，那会把样式逻辑推给 HTML，违背分离原则
真正容易被忽略的是：当表格内容动态加载、或用 JS 插入新 tr 时，nth-child 会自动重新计算，无需手动刷新样式——这点比用 class 控制可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
