应使用 tbody tr:nth-child(odd) 和 tbody tr:nth-child(even)，因浏览器将 thead/tbody/tfoot 视为独立容器，全局 tr:nth-child 会因 thead 中的 tr 导致计数错乱；:nth-child(odd) 等价于 :nth-child(2n+1)，前者更直观，后者更灵活；IE8-不支持，需 JS 回退；rowspan 会导致视觉与 DOM 行序不一致，纯 CSS 无法解决。
table tr:nth-child(odd) 和 tr:nth-child(even) 怎么写才生效
直接给 tr 写 :nth-child(odd) 失效，多数是因为表格里混入了 thead、tbody 或 tfoot —— 浏览器会把它们当作独立容器，:nth-child 的计数从每个容器内部重新开始。比如 thead > tr 占了前两行，那第一个 tbody > tr 就是第 1 个子元素，不是第 3 个。
正确做法是限定作用域：
- 如果表格结构规范（有
tbody），用tbody tr:nth-child(odd) - 如果没写
tbody，浏览器会自动补上，但不能依赖——显式加上更稳 - 避免用
tr:nth-child(odd)这种全局写法，它会把thead里的tr也计入计数，导致样式错位
为什么 nth-child(2n+1) 和 odd 效果一样但写法不同
:nth-child(odd) 是语法糖，等价于 :nth-child(2n+1)；:nth-child(even) 等价于 :nth-child(2n)。区别在于可读性和扩展性：
-
odd/even更直观，适合基础斑马纹 -
2n+1可以灵活调整：比如2n+2表示第 2、4、6… 行；3n表示每三行高亮一次 - 注意：
n从 0 开始代入，2n+1→ n=0 得 1，n=1 得 3，n=2 得 5……所以是奇数行
兼容性与真实项目中要绕开的坑
:nth-child() 在 IE9+ 支持良好，但 IE8 及以下完全不支持。如果必须兼容老 IE，不能只靠 CSS —— 需配合 JS 动态加 class，比如用 document.querySelectorAll('tbody tr') 遍历后对偶数索引加 class="even"。
立即学习“前端免费学习笔记（深入）”；
另一个常见问题：合并单元格（rowspan）会让视觉行序和 DOM 顺序错位，:nth-child 仍按 DOM 顺序匹配，不会“跳过”被合并的行。结果就是颜色区块看起来不连续。
- 遇到
rowspan，优先考虑用 JS 按渲染后的可视行号控制样式 - 或者改用
tbody tr:nth-of-type(odd)？不行——:nth-of-type按标签名计数，而所有tr类型相同，效果和:nth-child一样 - 纯 CSS 下无解，这是选择器机制决定的
一个可靠、可复制的斑马纹代码片段
以下样式适用于标准语义化表格（含 thead 和 tbody），无 JS 依赖，兼容现代浏览器：
table {
border-collapse: collapse;
width: 100%;
}
table th,
table td {
padding: 8px 12px;
border: 1px solid #ddd;
}
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-child(even) {
background-color: #fff;
}
tbody tr:hover {
background-color: #eef7ff !important;
}
关键点：必须写 tbody tr，而不是 tr；hover 覆盖要用 !important 防止被偶数/奇数规则覆盖；border-collapse: collapse 避免双线边框干扰视觉节奏。
如果表格动态插入行（比如 Vue/React 渲染），只要新 tr 正确 append 到 tbody，样式会自动生效——不需要手动重算或触发重绘。
