tbody tr:nth-of-type(even) 是实现表格斑马纹最可靠写法，它只统计tr标签本身，不受thead、tfoot、注释或空格影响；需带tbody前缀，避免用nth-child；表单嵌套时必须用JS动态加class；深色模式和hover需后置声明并合理覆盖。
tbody tr:nth-of-type(even) 是表格斑马纹的基准写法
直接用 tr:nth-child(even) 在有 thead 的表格里大概率失效——因为 thead 里的 tr 也参与计数，导致第一行数据被当成第 2 个子元素而染色。真正可靠的是 tbody tr:nth-of-type(even)，它只统计 tr 标签本身，无视 thead、tfoot、注释或空格文本节点。
实操建议：
- 必须带
tbody前缀，写成tbody tr:nth-of-type(even)，不能省略或换成table tr - 如果表格含多个
tbody（比如分组渲染），可用tbody:nth-of-type(1) tr:nth-of-type(even)精确控制第一个分组 -
nth-of-type在 Vue/React 动态插入新行后仍自动生效，无需手动加 class
表单嵌套时 nth-child 完全失效，得切 JS 方案
HTML 不允许 form 直接作为 tbody 子元素。一旦写成 form 提升到 tbody 外层，DOM 变成
，此时 ... tr 的父级已不是原来那个 tbody，所有伪类选择器都失准。
这时唯一能落地的方案是 JS 动态加 class：
- 渲染完成后执行
document.querySelectorAll('tbody tr').forEach((tr, i) => { if (i % 2 === 0) tr.classList.add('even-row'); }) - 若用 Vue，可在
v-for中直接绑定：:class="{ 'even-row': index % 2 === 0 }" - 避免在 JS 中重复操作 DOM，优先利用框架的响应式机制
颜色和交互要后置声明，否则深色模式下会糊成一片
nth-of-type 规则本身不感知系统主题，也不响应鼠标事件。如果你只写了 tbody tr:nth-of-type(even) { background: #f9f9f9; }，在深色模式下这个浅灰背景可能和黑色文字形成低对比度，肉眼几乎不可读。
正确做法是把深色适配和 hover 放在后面，靠层叠覆盖：
- 用
@media (prefers-color-scheme: dark)单独定义深色背景值，比如background: #2d2d2d -
tbody tr:hover { background: #e0e0e0 !important; }要写在斑马纹规则之后，且加!important防止被覆盖 - 推荐用
rgba(245, 245, 245, 0.9)替代纯色，减少与边框、文字的硬对比
别同时写 odd 和 even 两套背景色
常见错误是这样写：
tbody tr:nth-of-type(odd) { background: #fff; }
tbody tr:nth-of-type(even) { background: #f9f9f9; }
表面看没问题，但一旦某行被 JS 设置了 display: none 或合并单元格（rowspan），DOM 位置偏移，even 就可能漏匹配，留下白块；而且多一层规则就多一层覆盖风险。
更稳的做法：
- 只设一个规则，例如
tbody tr:nth-of-type(even) { background: #f9f9f9; }，其余行保持透明或继承父级背景 - 若需三段式变色（如每 3 行循环），改用
nth-of-type(3n)、nth-of-type(3n+1)、nth-of-type(3n+2)，而非混用 odd/even - 检查是否被内联样式或
!important干扰：打开开发者工具选中某行，看background-color是否出现在 Computed 面板里被划掉
实际项目里最常被忽略的，是 DOM 结构是否“干净”——哪怕只多一个看不见的注释节点或空格，都可能让 nth-child 计数错位；而 nth-of-type 虽然更鲁棒，但它解决不了表单嵌套这种结构性破坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
