nth-child(even)更稳妥，因其语义清晰、兼容性略好（ie9+），且与nth-child(2n)行为完全一致；但二者均按父元素所有子节点物理序号匹配，若混有thead/注释等干扰节点，应改用tr:nth-of-type(even)或确保层级正确。
nth-child(2n) 和 nth-child(odd/even) 哪个更稳妥？
nth-child(2n) 与 nth-child(even) 在语义和结果上等价，但实际渲染可能不同——关键在于父元素中是否所有子元素都是 tr。如果表格里混有 thead、tbody、tfoot 或注释节点，nth-child 是按所有子节点序号计数的，不是只算 tr。
-
tr:nth-child(2n)：匹配「父元素下第 2、4、6… 个子节点」且该节点是tr -
tr:nth-child(even)：同上，只是语法糖，行为完全一致 - 如果
tbody是table的直接子元素，而tr是tbody的子元素，那么应写成tbody tr:nth-child(2n)，否则table tr:nth-child(2n)可能完全不生效
为什么 nth-child(2n+1) 有时没变色？
常见原因是 CSS 选择器优先级被覆盖，或样式被更具体的规则（如内联 style、!important、id 选择器）压制。
- 检查浏览器开发者工具中该
tr元素最终计算出的background-color，看是否被其他规则覆盖 - 确保没有写成
tr:nth-child(2n + 1)（带空格），正确写法是tr:nth-child(2n+1)—— CSS 解析器对空格敏感，2n + 1会被视为无效参数，整条规则失效 - 若表格含
th行（如表头），它也是tr的子元素，会参与计数：第一个tr（含th）是nth-child(1)，第二个tr（数据行）才是nth-child(2)，此时2n+1匹配的是第 1、3、5… 个tr，未必是你想要的“首行数据”
隔行变色要兼容老浏览器，还能用 nth-child 吗？
nth-child() 在 IE9+ 支持，IE8 及以下不支持。若必须兼容 IE8：
- 回退方案：用 JavaScript 遍历
tr，给奇偶行加 class（如odd/even），再用 class 控制样式 - 或服务端渲染时直接输出带 class 的
tr - 纯 CSS 方案不可行；
:nth-of-type()在 IE9+ 同样可用，但它按同类型标签计数（忽略非tr子元素），比nth-child更鲁棒，可考虑改用tr:nth-of-type(2n)，尤其当父容器中存在其他元素时
性能和维护上，用 CSS 还是 JS 动态加 class？
纯 CSS 实现（tr:nth-child(2n)）无运行时开销，样式由浏览器引擎原生处理，渲染快、无 JS 依赖。
- 但一旦表格结构动态变化（如用 JS 插入/删除
tr），nth-child会自动重新计算，无需额外代码 - 相反，JS 手动加 class 容易遗漏更新逻辑（比如插入新行后忘记重排 class），维护成本高
- 唯一例外：需要支持 CSS 不支持的复杂模式（如「每 3 行一组，组内前两行浅灰、第三行深灰」），这时才值得用 JS 计算并打 class
nth-child 的公式本质是线性函数，理解 an+b 中 a 是周期、b 是偏移即可应付绝大多数隔行/分组需求。真正容易出问题的，从来不是公式本身，而是没看清 DOM 树层级和兄弟节点构成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
