:nth-child(2n)不生效因按dom位置计数而非tr数量，混入thead等节点会导致错位；推荐用tbody tr:nth-of-type(2n)更可靠，但ie8不支持；需注意css优先级、透明度及移动端渲染异常问题。
table 隔行变色为什么 :nth-child(2n) 有时不生效
因为 :nth-child 是按 DOM 树中的实际子元素位置计数，不是按 <tr> 标签数量。如果表格里混有 <code><thead>、<code><tbody>、<code><caption></caption> 或注释节点，序号就会错位。
常见错误现象：tr:nth-child(2n) { background: #f5f5f5; } 只给前几行上色，后面全乱；或者第一行（表头）被意外染色。
- 用
tbody tr:nth-child(2n)显式限定作用域，避开<thead> 干扰 <li>若需兼容老浏览器（IE8-），<code>:nth-child不支持，得用 JS 或服务端加 class - 避免在
<tr> 外层插入空格、换行或 HTML 注释——它们会成为 <code>tbody的文本节点，影响:nth-child计数用
:nth-of-type替代是否更稳是的，
:nth-of-type只看同类型标签（即<tr>），无视中间夹杂的其他标签或文本节点，语义更准确。 <p>使用场景：表格结构复杂，含多个 <code><tbody>、动态插入行、或服务端模板生成时容易混入非 <code><tr> 节点。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>写成 <code>tbody tr:nth-of-type(2n)，比:nth-child更可靠 - 注意：IE9+ 才支持
:nth-of-type，如需 IE8 支持，仍得退回到 class 控制 - 不要写
tr:nth-of-type(2n)（无父容器限定），否则会把<thead> 里的 <code><tr> 也计入 <h3>背景色冲突：CSS 优先级和透明度踩坑</h3> <p>隔行变色常和 hover、选中态、状态 class 冲突，比如 <code>.selected { background: #007bff !important; }直接盖掉:nth-child的颜色。性能影响小，但维护性差：靠
!important硬压，后续改色或加新状态容易互相覆盖。- 把隔行色写在最前面（如
tbody tr { background: #fff; }→tbody tr:nth-of-type(2n) { background: #f9f9f9; }→ 再写.selected），利用层叠顺序自然覆盖 - 避免用
rgba()或hsla()设半透背景——父容器若有背景图或渐变，会导致视觉发灰、对比度下降 - 检查 DevTools 的 Computed 样式，确认最终生效的是哪条规则，而不是只看 Styles 面板里有没有划掉
移动端 Safari 下
:nth-child渲染异常怎么办极少数 iOS 版本（如 iOS 14.5 之前）在快速滚动或动态渲染表格时，
:nth-child样式会延迟应用或漏掉某些行，尤其配合transform或will-change优化时。这不是 bug，是渲染管线对伪类重排的优化取舍。
- 临时方案：加
tbody { backface-visibility: hidden; }强制重建图层，多数能缓解 - 根本解法：服务端或 JS 初始化时，直接给偶数行加
class="even"，CSS 只写.even { background: #f9f9f9; } - 别依赖
transition: background做隔行色动画——人眼根本看不出，还白耗 GPU
真正麻烦的从来不是写对一行 CSS，而是表格结构稍一变化（比如加个
<tfoot>、套个 <code><div> 容器、或者用 Web Component 封装），<code>:nth-child就得重调一遍选择器。先理清 DOM 层级，再动伪类。 - 把隔行色写在最前面（如
