tbody tr:nth-of-type(even) 更可靠，因它只统计tr标签，无视thead等干扰；表单嵌套会破坏dom结构，需用js动态加class解决。
直接用 tbody tr:nth-child(even) 或 tbody tr:nth-of-type(even) 就能稳定生效，但必须避开 thead 干扰和表单嵌套破坏 DOM 结构这两个坑。
为什么 tr:nth-child(even) 有时不生效
常见错误现象是：样式写了，浏览器里也看到规则，但偶数行背景色就是不出现。根本原因是 :nth-child() 数的是父元素下的“所有子节点顺序”，而 table 的直接子元素除了 tbody > tr，还有 thead、tfoot、甚至注释或空格文本节点。比如 thead 有 1 行，那 tbody 第 1 行其实是 table 的第 2 个子元素 → 匹配 :nth-child(2)；但如果 thead 有 2 行，tbody 第 1 行就变成第 3 个子元素 → 不再匹配 even。
更隐蔽的坑是表格里嵌了 form 标签（比如每行一个提交表单），HTML 规范不允许 form 直接作为 tbody 子元素，浏览器会自动把 form 提升到 tbody 外层，导致 tr 的实际 DOM 位置错乱，:nth-child() 完全失效。
- 用开发者工具选中某行
tr，看Computed面板里background-color是否被其他规则覆盖 - 检查
table下是否只有thead/tbody，有没有意外插入的form、div或注释 - 临时删掉
thead测试 —— 如果这时样式突然生效，说明就是thead干扰了计数
tbody tr:nth-of-type(even) 更靠谱
:nth-of-type() 只统计同类型标签（这里是 tr），完全无视 thead、caption、colgroup 等非 tr 元素。它数的是“第几个 tr”，不是“第几个子节点”，语义更符合人对“表格第 2 行”的直觉。
兼容性没问题：IE9+、所有现代浏览器都支持。写法上建议带上 tbody 前缀，避免误染 thead 或 tfoot 中的 tr：
tbody tr:nth-of-type(even) {
background-color: #f9f9f9;
}
tbody tr:nth-of-type(odd) {
background-color: #ffffff;
}
- 如果表格有多个
tbody，可以用tbody:nth-of-type(1) tr:nth-of-type(even)精确控制第一个分组 - 不要写成
table tr:nth-of-type(even)—— 这样会把thead tr也算进去，反而出错 - 动态渲染（如 Vue/React）后新增行，
:nth-of-type仍能自动匹配，不需要手动加 class
遇到表单嵌套必须换思路
当 HTML 结构类似这样时：<tbody><tr><form><td>...</td></form></tr></tbody>，浏览器会把 form 移出 tbody，DOM 变成 <form></form>
<tbody><tr><td>...</td></tr></tbody>，tr 的父级不再是原来那个 tbody，伪类彻底失效。
此时唯一可靠方案是用 JS 控制 class：
- 渲染完表格后，遍历
tbody.querySelectorAll('tr')，给奇数索引的tr加class="row-odd"，偶数加"row-even" - 如果用 jQuery，一行就能搞定：
$('tbody tr').filter(':even').addClass('row-even') - Vue/React 场景下，在循环模板里用
:class="{ 'row-even': index % 2 === 0 }"
别指望靠调整 CSS 选择器绕过这个限制 —— DOM 已被浏览器重排，:nth-child 和 :nth-of-type 都依赖原始结构，无法感知逻辑上的“行归属”。
颜色与性能的小提醒
用 rgba() 或半透明色（比如 background-color: rgba(0, 0, 0, 0.05)）比纯色更柔和，也更容易适配深色模式切换。但要注意：过度使用复杂表达式如 tr:nth-child(4n+3) 对渲染性能影响极小，真正拖慢的是频繁触发重排的动画或大量内联样式。
最容易被忽略的一点：表格用了 display: block 做响应式（比如移动端强制横滚），此时 tr 不再是表格行盒模型，:nth-of-type 虽然还能匹配，但视觉上可能错位 —— 这时候必须改用 JS 控制 class，或者放弃纯 CSS 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
