table tr:nth-child(odd)失效是因为tr的父元素是tbody而非table，应写为tbody > tr:nth-child(odd)；:nth-of-type(odd)可绕过此问题但兼容IE9+；动态插入行时需确保append到tbody末尾以维持序号逻辑。
table里:nth-child(odd)为什么选不到第一行
因为 tr 的父元素是 tbody（或 thead/tfoot），不是 table。直接写 table tr:nth-child(odd) 会失效——浏览器按 DOM 树层级计算，tr 在 tbody 下才是子元素。
- 正确写法是
tbody tr:nth-child(odd)，或者更稳妥地用tbody > tr:nth-child(odd) - 如果表格没写
tbody，HTML 解析器会自动补上，但不能依赖它出现在 CSS 选择器里 - 用
:nth-of-type(odd)倒是能绕过这个问题，但它匹配的是同类型标签（tr），不依赖父容器结构，不过兼容性略低（IE9+）
nth-child(even)和nth-child(odd)在表头和数据行混用时的陷阱
当 thead 和 tbody 共存，且都含 tr，tbody tr:nth-child(odd) 仍可能错位——因为 nth-child 是从父元素第一个子元素开始数，而 thead 的 tr 占了前几个位置。
- 比如
thead有 1 行，tbody第一个tr实际是父元素第 2 个子元素，会被:nth-child(even)选中，导致首行变色 - 解决办法：只对
tbody内部重置计数，写成tbody > tr:nth-child(odd)（注意加了子选择器>） - 更干净的做法是给
tbody单独设背景，再用tbody > tr:nth-child(odd) { background: #f9f9f9; }，避免受thead干扰
CSS斑马线在动态插入行时失效怎么办
:nth-child 是静态计算的，DOM 插入新 tr 后，浏览器会自动重新评估所有 nth-child 匹配，所以通常不会“失效”。但如果你用 JS 把新行插到 tbody 开头，或跨 thead/tbody 移动，就容易打乱序号逻辑。
- 插入行时统一用
tbody.appendChild(newTr)或tbody.append(newTr)，确保顺序自然递增 - 避免用
insertBefore插到已有tr中间，除非你同步更新其他行的 class（不如直接靠 CSS 自动算） - 极端情况可加一层 wrapper：
<tbody class="striped">，再写 <code>.striped > tr:nth-child(odd)，语义更稳兼容性与性能：IE8 不支持 nth-child，但现代项目真要管吗
IE8 及更早版本完全不支持
:nth-child()，会忽略整条规则。如果必须兼容，就得回退到 class 控制（如tr.odd），由 JS 或后端模板生成。立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 斑马线在 IE9+、Edge、Chrome、Firefox、Safari 全支持，无性能问题——浏览器原生优化了伪类匹配
- 用 class 模拟虽然兼容，但 JS 插入行时必须手动判断奇偶并加 class，容易出错；服务端渲染则增加模板复杂度
- 真正要注意的不是兼容性，而是别在大量行（比如 5000+）的表格里套复杂渐变背景，
nth-child本身不卡，但重绘可能拖慢
tr:nth-child(odd)发现没效果，第一反应是查浏览器版本，其实该先打开开发者工具，看那行tr真正在哪个父容器下、前面有没有别的子元素挡着。
