推荐使用 tbody > tr:nth-child(odd) 和 tbody > tr:nth-child(even)，因其精准匹配 tbody 直系子行，避免 thead、空白节点、嵌套表格等干扰，且兼容动态插入与 rowspan；其他写法易失效。
直接写 tbody tr:nth-child(odd) 和 tbody tr:nth-child(even) 就能稳定生效，其他写法大概率失效或不可靠。
为什么不能用 table tr:nth-child(odd)
因为 table 的直接子元素不只是 tr，还包括 thead、tbody、tfoot、caption 等。浏览器按所有子元素的物理顺序编号，tr 很可能排在第 2、3 或更后位置，导致 nth-child(odd) 根本不匹配任何行。
- 实测中，
table tr:nth-child(1)常常选不到第一行数据，而是选中了thead - 即使表格没写
thead，某些模板引擎或构建工具会自动注入注释或空白文本节点，同样干扰序号 - 用 DevTools 右键目标
tr→ “Reveal in Elements Panel”，看它的 “Child index” 是否为预期值（如 1、3、5）
为什么推荐加 > 写成 tbody > tr:nth-child(odd)
> 是子选择器，确保只匹配 tbody 的**直系子 tr**，排除嵌套在 div、template 或意外插入的非 tr 元素干扰。
- 若
tbody里混有<tr class="summary"> 或 <code><tr data-role="footer">，<code>nth-child仍按位置计数，样式节奏不变；而nth-of-type会跳过它们，导致视觉错位 - 如果服务端或构建流程无法保证 HTML 压缩（移除换行/空格），
>能有效过滤掉因缩进产生的空白文本节点 - 不加
>时，tbody tr会匹配任意后代tr，比如tbody > tr > td > table > tr，造成样式污染 - JS 往
tbody中append()新tr，后续所有行序号立刻重排，原even行可能变成odd -
rowspan不影响计数，但若某行占两行高，下一行背景色仍紧接其后，不会“跳过”视觉空档 - 隐藏行用
display: none仍参与计数；必须改用visibility: collapse（对表格行有效）或直接从 DOM 移除 - 导出 PDF 或要求“固定行号样式”时，纯 CSS 不够用，得在服务端或 JS 插入时同步打上
class="row-odd"这类语义 class - 颜色建议用
hsl(210, 8%, 95%)这类带明度控制的值，方便微调对比度 - 避免纯灰配色（如
#f0f0f0/#f9f9f9），至少保证文字与背景的对比度 ≥ 4.5:1 - 若表格有细边框，可配合
border-bottom: 1px solid #e0e0e0强化行间分隔，比单靠背景色更鲁棒 - IE8 及以下不支持
:nth-child，如需兼容，必须用 JS 动态加 class 或服务端输出 class
遇到动态插入或 rowspan 怎么办
:nth-child() 始终按 DOM 树位置实时计算，和渲染结果无关——这是它可靠的原因，也是限制所在。
立即学习“前端免费学习笔记（深入）”；
别忽略颜色可访问性与边框合并
仅靠背景色区分行，对色觉障碍用户或低亮度屏幕效果很差；且当 border-collapse: collapse 开启时，相邻行边框会重叠，可能让变色边界模糊。
