:nth-child(2n)在表格中不生效，是因为它按父元素所有子元素序号计算，而thead、tbody等结构导致tr序号不连续；应改用tbody tr:nth-child(odd)或tbody tr:nth-of-type(odd)确保准确匹配。
为什么 :nth-child(2n) 在表格里可能不生效？
直接对 <tr> 用 <code>:nth-child(2n) 却没出现斑马纹，大概率是因为表格里混入了 <thead>、<code><tbody> 或 <code><tfoot> —— <code>:nth-child 是按父元素下的**所有子元素顺序编号**的，不是按 <tr> 编号。比如 <code><thead><tr></tr></thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody> 中，第二个 <tr> 实际是父元素（<code><table>）的第 3 个子元素，<code>:nth-child(2n) 根本匹配不到它。
解决办法：把选择器限定在具体容器内，比如只作用于 <tbody> 下的 <code><tr>：
<pre class="brush:php;toolbar:false;">tbody tr:nth-child(odd) { background: #f5f5f5; }
tbody tr:nth-child(even) { background: #fff; }</pre>
<p>这样编号就从 <code><tbody> 的第一个子 <code><tr> 开始算起，不会被 <code><thead> 干扰。
<h3>
<code>:nth-child(odd) 和 :nth-child(2n+1) 有区别吗？
没有视觉或行为区别，两者完全等价。但写法上：odd 更直观，2n+1 更通用（比如想选第 3、6、9 行就用 :nth-child(3n)）。实际项目中建议优先用 odd/even，可读性高，也避免手误写成 2n+0 这类无效表达式。
注意：别用 :nth-of-type 替代 —— 它按元素类型计数，看似更“智能”，但在有 <tr> 混合 <code><tr class="summary"> 或注释节点时，反而容易错位；<code>:nth-child 虽然严格，但只要结构干净（比如规范用 <tbody> 包裹数据行），就足够稳定。
<h3>如何跳过表头和汇总行再应用斑马纹？</h3>
<p>如果 <code><tbody> 里还夹着带 <code>class="total" 的汇总行，又不想让它参与奇偶计数，:nth-child 本身做不到“跳过特定元素”。这时候有两个务实方案：
- 把汇总行移出
<tbody>，放到 <code><tfoot>，然后单独样式控制，保持 <code>tbody tr:nth-child(odd)干净有效 - 改用 CSS 自定义属性 +
:not()组合，例如：tbody tr:not(.total):nth-child(odd) { background: #f5f5f5; }但注意：:not(.total):nth-child(odd)不等于“去掉 .total 后重新编号的奇数行”，它仍是原始位置上的奇数且非 .total 的行 —— 所以若第 3 行是.total，第 4 行仍会被当成偶数行渲染，视觉上就断了纹路
真正要“重编号”，得靠 JS 动态加类，或者重构 HTML，让数据行连续无干扰。
IE 兼容性要注意什么？
:nth-child 在 IE9+ 支持良好，但 IE8 及以下完全不支持。如果必须兼容 IE8，别用 :nth-child，改用为每行手动加 class="row-odd"/class="row-even"，或用 JS 遍历 tr 动态添加类。不过现在绝大多数业务已放弃 IE8，这个限制基本只存在于遗留系统维护场景。
另外提醒：不要为了兼容而降级写成 :nth-child(2n+0) 这类冗余形式 —— 没有任何兼容性收益，反而增加维护成本。
斑马纹看着简单，关键在表格结构是否干净。一旦嵌套层级或特殊行打乱了子元素顺序，:nth-child 就会“失焦”。先理清 DOM 结构，再下选择器，比反复调参数更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
