应使用 tbody tr:nth-child(odd) 而非 table tr:nth-child(odd)，因后者受 caption、thead 等同级节点干扰导致序号偏移；tbody 会自动补全，确保准确匹配数据行。
直接写 tr:nth-child(odd) 很可能不生效，不是语法错，而是 DOM 子元素计数被干扰了——必须限定作用域到 tbody 内部，否则表头、注释、空文本节点都会让序号偏移。
为什么 tr:nth-child(odd) 常常不按视觉奇偶变色
浏览器严格按父元素下所有同级子节点的物理顺序编号：thead 里的 tr、caption、甚至 HTML 中的换行和空格（在某些解析模式下）都算进计数。比如 table 下结构是：caption → thead → tbody，那第一个数据行其实是整个 table 的第 3 或第 4 个子元素，tr:nth-child(odd) 自然就跳过了它。
验证方法：打开 Chrome DevTools，选中某行 tr，在右侧 Styles 面板里看是否命中规则；若没命中，右键「Reveal in Elements Panel」，观察它在父节点下的实际 child index。
- 不要依赖
table tr:nth-child(odd)这类宽泛选择器 - 避免在
table标签内直接写tr，始终显式包裹tbody - 即使没写
tbody，浏览器也会自动补上，所以tbody tr:nth-child(odd)兼容所有标准表格
tbody tr:nth-child(odd) 和 tbody tr:nth-of-type(odd) 怎么选
两者效果在干净结构下一样，但行为逻辑不同：
-
tbody tr:nth-child(odd)：只认位置，第 1、3、5… 个子节点要是tr才匹配。适合要求“视觉上第 1 行固定为浅灰”的报表场景 -
tbody tr:nth-of-type(odd)：只统计tr标签本身出现次数，中间插个div或注释不影响计数。适合 React/Vue 动态渲染、或模板里可能插入非tr节点的项目 - IE8 不支持
:nth-of-type，如需兼容，只能用 JS 动态加class="odd"
现代项目优先用 tbody tr:nth-child(odd) —— 语义更可控，且无需担心跨标签干扰。
容易被忽略的兼容性与可访问性细节
纯 CSS 隔行色看似简单，但几个点一漏就出问题：
-
:nth-child()在 IE9+ 支持，IE8 及以下必须降级：服务端输出class="even"，或前端用 JS 遍历后element.classList.toggle('even', i % 2 === 0) - 打印时背景色默认不显示，需加
@media print { * { background-color: transparent !important; } }，并改用border-bottom: 1px solid #eee辅助区分 - 浅灰配白底（如
#f5f5f5+ 黑字）实测对比度可能低至 1.1:1，远低于 WCAG AA 级要求的 4.5:1。推荐用hsl(210, 8%, 95%)或#f8f9fa - 遇到大量
rowspan时，视觉上颜色会“断层”，这不是选择器失效，而是设计预期与呈现的错位——此时应放弃纯背景色，改用渐变背景或边框分隔
真正麻烦的从来不是写哪条规则，而是你得先看清 HTML 结构里 tbody 下到底有几个 tr 是连续的直系子元素。打开开发者工具悬停看父子关系，比死记语法管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
