:nth-child(2n)不生效因按DOM位置计数而非tr数量，混入thead等节点会导致错位；推荐用tbody tr:nth-of-type(2n)更可靠，但IE8不支持；需注意CSS优先级、透明度及移动端渲染异常问题。
table 隔行变色为什么 :nth-child(2n) 有时不生效
因为 :nth-child 是按 DOM 树中的实际子元素位置计数，不是按 <tr> 标签数量。如果表格里混有 <thead>、<tbody>、<caption> 或注释节点，序号就会错位。
常见错误现象：tr:nth-child(2n) { background: #f5f5f5; } 只给前几行上色，后面全乱；或者第一行（表头）被意外染色。
- 用
tbody tr:nth-child(2n)显式限定作用域，避开<thead>干扰 - 若需兼容老浏览器（IE8-），
:nth-child不支持，得用 JS 或服务端加 class - 避免在
<tr>外层插入空格、换行或 HTML 注释——它们会成为tbody的文本节点，影响:nth-child计数
用 :nth-of-type 替代是否更稳
是的，:nth-of-type 只看同类型标签（即 <tr>），无视中间夹杂的其他标签或文本节点，语义更准确。
使用场景：表格结构复杂，含多个 <tbody>、动态插入行、或服务端模板生成时容易混入非 <tr> 节点。
立即学习“前端免费学习笔记（深入）”；
- 写成
tbody tr:nth-of-type(2n)，比:nth-child更可靠 - 注意：IE9+ 才支持
:nth-of-type，如需 IE8 支持，仍得退回到 class 控制 - 不要写
tr:nth-of-type(2n)（无父容器限定），否则会把<thead>里的<tr>也计入
背景色冲突：CSS 优先级和透明度踩坑
隔行变色常和 hover、选中态、状态 class 冲突，比如 .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>、套个 <div> 容器、或者用 Web Component 封装），:nth-child 就得重调一遍选择器。先理清 DOM 层级，再动伪类。
