tbody tr:nth-of-type(odd) 更可靠，因 :nth-of-type() 仅统计 tr 标签，自动跳过 thead/tfoot 中的 tr 和 th/td 等兄弟节点，避免被表头或隐藏行干扰，且对 rowspan 复杂表格更鲁棒。
直接用 tbody tr:nth-child(odd) 或 tbody tr:nth-child(even) 就能生效，但必须显式写 tbody，否则在有 thead 的表格里大概率错位。
为什么 tr:nth-child(odd) 经常不生效？
因为 :nth-child() 是按父元素所有子节点顺序计数的，不是只数 tr。如果表格有 thead，它的 tr 就占了第 1 个位置，后面 tbody 里的第一行就变成第 2 个——nth-child(odd) 就完全跳过了它。
- 打开开发者工具，看实际匹配到的是哪些
tr，确认是否被thead或隐藏行干扰 - 裸写
tr:nth-child(odd)在 CMS 输出、JS 动态渲染的表格中极易翻车 - 即使 HTML 源码没写
<tbody> 标签，浏览器也会自动补上，但 CSS 选择器仍按真实 DOM 结构计算 <h3> <code>tbody tr:nth-of-type(odd)更可靠:nth-of-type()只统计同类型标签（这里是tr），会自动跳过thead、tfoot里的tr，也无视th、td等兄弟节点，语义更干净。- 对含
rowspan的复杂表格更鲁棒，但注意：纯 CSS 无法处理跨多行合并后“视觉上连续但 DOM 上断裂”的场景 - IE8 完全不支持
:nth-of-type，如需兼容，只能 JS 动态加class - 推荐组合使用：
tbody tr:nth-of-type(odd) { background-color: var(--zebra-odd); }，把颜色抽成 CSS 变量便于暗色模式切换
颜色和边框容易被忽略的细节
斑马纹不是装饰，是阅读辅助。配色太强或太弱都会适得其反。
- 别用纯白
#fff或纯黑#000作底色，优先选半透明灰，比如rgba(245, 245, 245, 0.8)或#f9f9f9 - 如果表格带边框，必须加
border-collapse: collapse，否则双线边框会让条纹显得臃肿、错位 - 禁用内联样式设背景（如
<tr style="background:#f0f0f0">），它会覆盖伪类，且无法响应主题切换 <li>用 <code>background-image: linear-gradient()做条纹时，必须显式设background-size，例如100% 40px，否则默认铺满整行看不到重复效果
真正卡住人的往往不是怎么写 CSS，而是 HTML 结构本身不规范：没写
<tbody>、JS 插入新行后没同步更新 class、或者用 <code>flex改了tr的display导致伪类失效——这些地方比选择器写法更值得花时间检查。 - 对含
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
