:nth-child(2n)不按预期变色主因是未限定作用域，thead等tr干扰计数；应改用tbody tr:nth-child(even)或更鲁棒的tbody tr:nth-of-type(even)。
为什么 :nth-child(2n) 有时不按预期给表格行变色？
直接对 <tr> 用 <code>:nth-child(2n) 却发现颜色跳行、错位，大概率是因为表头 <thead> 或空行、合并单元格的 <code><tr> 干扰了计数。<code>:nth-child() 算的是父元素下所有同级 <tr> 的位置，不管它在 <code><thead> 还是 <code><tbody> 里。
<p>正确做法是限定作用范围：只给 <code><tbody> 内的行生效。
<ul><li>写成 <code>tbody tr:nth-child(odd) 或 tbody tr:nth-child(even)，避开 <thead> 干扰
<li>如果表头是多行（比如带筛选栏），仍可能出错——此时应改用 <code><tbody> 下的子元素序号，即 <code>tbody > tr:nth-child(odd)（注意 >）
:nth-child(2n)，优先用语义更清晰的 odd/even
tr:nth-child(odd) 和 tr:nth-of-type(odd) 有什么实际区别？
在纯数据表格中二者常表现一致，但一旦插入非 <tr> 元素（如注释、<code><script></script>、或服务端渲染留的占位 <div>），行为立刻不同：
<ul><li>
<code>:nth-child(odd) 按 DOM 顺序数「第1、3、5…个子节点」，只要不是 <tr> 就跳过计数，容易断档
<li>
<code>:nth-of-type(odd) 只统计同为 <tr> 的兄弟节点，更鲁棒——哪怕中间插了 <code><caption></caption> 或注释，也能稳定选中第1、3、5…个 <tr>
<li>所以更推荐：<code>tbody tr:nth-of-type(even) { background: #f9f9f9; }
隔行变色时如何兼容表头冻结（position: sticky）？
给 <thead> tr 加 <code>position: sticky 后，若 <tbody> 的奇偶行样式依赖整体结构，滚动时视觉节奏可能突变——因为粘性表头脱离了文档流，但 <code>:nth-of-type 计算不受影响，真正的问题出在 z-index 和背景覆盖上。
立即学习“前端免费学习笔记（深入）”；
- 确保
<thead> 有明确 <code>background-color，否则会透出下方<tbody> 的隔行色 <li>给 <code>thead tr设置z-index: 10，防止被<tbody> 行遮挡 <li>不要对 <code><thead> 行使用 <code>:nth-of-type隔色——表头通常统一色，且只有1–2行，没必要移动端表格缩放时颜色错乱，是伪类失效了吗？
不是失效，是视口缩放导致 CSS 像素重绘触发了浏览器渲染层切换，某些旧版 Safari 或安卓 WebView 会对
:nth-child缓存异常。这不是 bug，而是渲染优化副作用。- 临时修复：加一句
transform: translateZ(0)到tbody，强制启用 GPU 层 - 长期建议：用
tbody tr的 class 控制（如服务端/JS 动态加row-even），规避纯 CSS 序号依赖 - 验证是否真有问题：打开开发者工具，手动删掉几行
<tr>，看样式是否实时重算——如果不变，说明是缓存问题 <p>真正麻烦的从来不是写对一行伪类，而是当表格混入动态加载、服务端注入、跨框架嵌套时，<code>:nth-child的“序号”早已不是你肉眼看到的那个序号。
- 临时修复：加一句
