:nth-child(odd)不生效是因为其按dom树层级计数，thead/tfoot等标签会重置子元素序号；应改用tbody tr:nth-of-type(odd)或table tr:nth-of-type(odd)确保按tr类型计数。
为什么 :nth-child(odd) 有时不生效？
直接给 tr 写 :nth-child(odd) 却没变色，大概率是因为表格里混入了 thead、tbody 或 tfoot——这些标签会重置子元素计数。浏览器按 DOM 树层级计算 :nth-child，不是按视觉行序。比如 thead > tr 占了第 1 行，那 tbody > tr:nth-child(odd) 实际匹配的是第 1、3、5…个 tr（在 tbody 内部），而非整表的奇数行。
解决办法是确保目标 tr 在同一父容器下，或改用更鲁棒的选择器：
- 把所有
tr放进一个tbody，然后对tbody tr:nth-child(odd)设样式 - 或直接作用于
table tr:nth-of-type(odd)（:nth-of-type按标签类型计数，无视其他兄弟节点） - 避免在
tr前插入caption或注释节点，它们也参与:nth-child计数
:nth-child(odd) 和 :nth-of-type(odd) 的关键区别
:nth-child(odd) 看的是“这个位置上是不是第奇数个子元素”，而 :nth-of-type(odd) 看的是“这个位置上是不是第奇数个 tr 元素”。当表格结构干净（无 thead、无额外 wrapper）时两者效果一样；但只要存在 thead，:nth-child(odd) 就会从 thead 的 tr 开始计数，导致 tbody 里的第一行变成偶数位。
实操建议：
- 结构含
thead→ 用tbody tr:nth-of-type(odd) - 纯数据表、无表头 →
tr:nth-child(odd)更直观 - 想统一控制所有行（含表头）→ 用
tr:nth-of-type(2n+1)，它等价于:nth-of-type(odd)，但显式写法更易理解逻辑
兼容性与性能要注意什么？
:nth-child() 和 :nth-of-type() 在 IE9+ 都支持，但 IE8 及以下完全不识别——如果必须兼容 IE8，得用 JS 动态加 class 或借助 polyfill（如 Selectivizr），不推荐。
性能上基本无压力：现代浏览器对这类伪类做了优化，但若表格超大（几千行），反复重排仍可能卡顿。此时建议：
- 避免在
:nth-child里嵌套复杂选择器，比如table tbody tr:nth-child(odd) td比tr:nth-child(odd)多一层查找 - 斑马线颜色用
background-color，别用box-shadow或渐变背景，后者绘制开销更高 - 如果表格动态增删行，CSS 方案依然有效；但若用 JS 手动切换 class，则需同步维护奇偶状态，容易出错
实际写法示例（带常见坑）
正确写法（兼容 thead）：
table tbody tr:nth-of-type(odd) {
background-color: #f5f5f5;
}
错误写法（看似简洁，但失效）：
tr:nth-child(odd) {
background-color: #f5f5f5;
} /* 若有 thead，tbody 第一行会被忽略 */
补充：如果用了 border-collapse: collapse，记得给 td 和 th 设置 background-clip: padding-box，否则边框重叠处可能出现颜色断层。
斑马线真正难的不是写法，而是判断当前表格结构是否“干净”——多看一眼 DOM 树，比反复调样式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
