tr:nth-child(odd)不生效主因是浏览器自动插入tbody导致计数错乱，应改用tbody tr:nth-of-type(odd)并显式书写tbody，避免background、子元素覆盖及滚动容器干扰。
table中tr:nth-child(odd)不生效？检查是否被tbody干扰
浏览器会自动为 table 插入 tbody，哪怕你没写。所以 tr:nth-child(odd) 实际匹配的是 tbody 里的第1、3、5个 tr，但如果 HTML 里直接写了 thead + tr，这些 tr 就成了 table 的子元素，而 tbody 里的 tr 反而从第1个开始重新计数——导致条纹错乱或完全失效。
实操建议：
- 显式写出
tbody标签，确保所有数据行都在它内部 - 用
tbody tr:nth-child(odd)替代笼统的tr:nth-child(odd) - 如果用了
thead，确认它不和tbody混在同一个父级层级下（比如没被意外包进另一个div）
nth-child(2n+1) 和 nth-of-type(odd) 有什么区别？优先用后者
nth-child 看的是「位置」：第1个子元素、第3个子元素……不管它是不是 tr；nth-of-type 看的是「同类型元素中的序号」：第1个 tr、第2个 tr……更符合表格条纹的真实意图。
常见错误现象：在 tr 前加了 caption 或注释节点，nth-child(odd) 就全乱了，但 nth-of-type(odd) 不受影响。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 写成
tbody tr:nth-of-type(odd)更鲁棒 - 不要依赖
2n+1这种写法——它和odd功能一样，但可读性差，还容易手误写成2n+2 - 如果需要兼容 IE8，注意：
nth-of-type不支持，得用 class 手动标奇偶
背景色被子元素继承或遮盖？用 background-color 而非 background
给 tr 设 background: #f5f5f5，结果单元格（td）自己也有背景色，或者设置了 background-image，就把条纹盖住了。
性能影响：用 background-color 更轻量，渲染也更确定；而 background 是复合属性，可能意外带入 repeat 或 position，干扰视觉效果。
实操建议：
- 明确写
background-color: #f9f9f9，避免用background - 检查
td和th是否有background、border-collapse: collapse下的边框颜色干扰（深色边框会让浅色条纹显得更淡） - 如需 hover 高亮整行，记得同时设
td和th的背景，否则只变tr可能看不出效果
移动端表格横向滚动时条纹断裂？固定 tbody 高度会破坏 nth-of-type
给 tbody 加 max-height + overflow-y: auto 是常见做法，但它会让 tbody 内部的 tr 渲染行为变化，某些浏览器下 nth-of-type 计数异常，尤其配合 position: sticky 表头时。
根本原因不是 CSS 错了，而是滚动容器改变了渲染树结构，伪类重算时机不稳定。
实操建议：
- 放弃对滚动中
tbody的纯 CSS 条纹，改用 JS 在渲染时给每行加class="row-odd"或class="row-even" - 若坚持用 CSS，把条纹逻辑移到
td上：tbody tr td:nth-of-type(odd)—— 但这只适合单行内容，多列对齐易出问题 - 真正稳定的方案：服务端或构建时就输出带 class 的行，不依赖运行时伪类
伪类条纹看着简单，但一碰复杂布局、动态内容或老浏览器，就很容易漏掉 tbody、写错类型、被子元素覆盖——最省心的方式，其实是让生成 HTML 的那层代码决定奇偶性。
