:nth-child(odd)没生效是因为thead等结构干扰dom子元素计数；应改用tbody tr:nth-child(odd)或更稳妥的tbody tr:nth-of-type(odd)，并注意可访问性与打印兼容性。
为什么 :nth-child(odd) 有时没生效？
直接写 tr:nth-child(odd) { background: #f0f0f0; } 却发现偶数行变色、或者第一行没响应，大概率是表格结构干扰了“child”计数。浏览器按 DOM 树中真实子元素顺序编号，thead、tbody、tfoot 都会影响 :nth-child 的计算起点。比如 thead 里有 1 行，那第一行数据行其实是整个 table 的第 2 个子元素，:nth-child(odd) 就跳过了它。
正确写法：限定作用范围到 tbody
把选择器锚定在 tbody 内部，让计数从数据行本身开始：
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-child(even) {
background-color: #ffffff;
}
这样无论 thead 有几行、有没有 caption，都不会影响奇偶判断。如果表格没显式写 tbody，浏览器会自动补上，所以这个写法兼容所有标准 HTML 表格。
替代方案：:nth-of-type() 更稳妥？
当表格混用 tr 和其他元素（比如自定义组件插入的 div），或使用了动态渲染框架（React/Vue）导致 DOM 结构不可控时，:nth-of-type(odd) 比 :nth-child(odd) 更可靠——它只统计同类型标签（即 tr）的出现顺序，忽略中间夹杂的其他节点。
-
tbody tr:nth-of-type(odd)：推荐用于复杂表格或 SSR/CSR 混合场景 - 注意：IE8 不支持
:nth-of-type，如需兼容请用 JS 或 class 手动标记 - 性能上无差异，现代浏览器对两者优化都很到位
容易被忽略的细节
隔行换色不是纯视觉装饰，它直接影响可访问性与打印效果：
- 务必检查高对比度模式下背景色是否仍可辨识文字（WCAG 要求文本与背景对比度 ≥ 4.5:1）
- 打印时默认不显示背景色，需加
@media print { * { background-color: transparent !important; } }并改用边框或字体粗细区分 - 如果表格有
rowspan/colspan，:nth-child依然按行位置计数，不会因跨行而跳过——这点常被误以为“错位”，其实是预期行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
