应使用tbody tr:nth-of-type(odd)等锚定到具体容器的选择器，避免全局选择器；nth-of-type比nth-child更稳因跳过非tr元素；需注意兼容性、对比度及动态插入时样式漂移问题。
tr:nth-of-type(odd) 和 tr:nth-of-type(even) 怎么写才生效
直接写 tr:nth-of-type(odd) 很可能不生效——因为表格里 <thead>、<code><tbody>、<code><tfoot> 是容器，不是 <code>tr 的同级兄弟；tr 实际上是这些容器的子元素，而非表格（table）的直接子元素。所以 table tr:nth-of-type(odd) 会匹配整个文档中所有 tr，但计数时只看“同为 tr 的兄弟”，而它们根本不在同一父级下。
正确做法是把选择器锚定到具体容器内：
- 如果所有数据行都在
<tbody> 中，就用 <code>tbody tr:nth-of-type(odd) - 避免写成
table tr:nth-of-type(odd)或tr:nth-of-type(odd)（全局污染且不可控） - 不要在
tr前加空格，比如tbody tr :nth-of-type(even)—— 这会选中tr内部的偶数个td，变成隔列变色 - 适用场景：纯数据表格、服务端渲染、静态 HTML
- 不适用场景：React/Vue 组件中
tr被包裹在Fragment或display: contents容器里——此时tr不再是真实 DOM 子元素，nth-of-type失效 - 注意：IE8 及更早版本完全不支持
nth-of-type，如需兼容，必须用 JS 打 class - 推荐用
hsl()或rgba()：比如background-color: hsl(210, 4%, 96%)（极浅蓝灰），比#f8f9fa更易微调明度 - 避免只靠颜色区分信息：隔行变色是辅助手段，不能替代语义结构（如
th标记表头） - 如果表格支持导出 PDF 或打印，记得加
@media print规则，否则某些浏览器会丢掉背景色 - 服务端渲染时，直接给每行加
class="row-odd"或class="row-even" - 前端动态操作时，在插入/删除后手动重置 class：
tbody.querySelectorAll('tr').forEach((tr, i) => tr.className = i % 2 === 0 ? 'row-odd' : 'row-even') - 不要依赖
nth-of-type(3n)做“每三行强调一次”这类业务逻辑——DOM 变动会让它彻底失控
为什么有时候 nth-of-type 比 nth-child 更稳
tr:nth-of-type(odd) 只统计父元素下所有 tr 兄弟节点的位置，自动跳过 <thead>、<code><caption></caption>、注释或 <div> 等非 <code>tr 元素。而 tr:nth-child(odd) 是按父元素所有子元素顺序编号，一旦 <thead> 里有 <code>tr，它就算第 1 个，导致 tbody 里第一行数据变成第 2 个，被 even 匹配到。
所以当 HTML 结构明确（比如你控制着模板，保证 tbody 是唯一含 tr 的容器），nth-of-type 更接近“视觉奇偶行”的直觉。
立即学习“前端免费学习笔记（深入）”；
颜色值和可访问性怎么配才不出问题
背景色对比度不够会导致文字难读，尤其对弱视用户。别用纯灰配黑字（比如 #ccc + #000），WCAG AA 级要求文本与背景对比度 ≥ 4.5:1。
动态插入行后 nth-of-type 样式错乱怎么办
这是最常被忽略的一点：nth-of-type 每次都重新计算当前 DOM 中同类型兄弟的位置。你往 tbody 中间插入一个新 tr，后面所有 tr 的序号都会变，原本的“第 3 行”可能变成“第 4 行”，样式立刻漂移。
这不是 bug，是设计如此。但如果你需要样式稳定（比如导出、截图、自动化测试），就得放弃纯 CSS 方案：
