tbody tr:nth-child(even) 没生效最常见原因是 thead 干扰序号计算，nth-child 统计父元素下所有子元素，thead>tr 占第1位致 tbody 首行被误判为偶数；应明确限定作用域并检查样式优先级、结构规范性及深色模式适配。
tbody tr:nth-child(even) 为什么没生效？
最常见原因是 thead 干扰了序号计算——nth-child() 数的是父元素下所有子元素，thead > tr 占了第 1 个位置，导致 tbody 里第一行变成第 2 个，被 even 匹配到，但你本意只想染数据行。
- 直接写
tr:nth-child(even)会把表头也纳入计数，视觉上错位 - 正确做法是限定作用域：
tbody tr:nth-child(even)或tbody tr:nth-child(odd) - 如果表格没显式写
tbody，浏览器会自动补全，但选择器仍需明确写tbody才能精准命中 - 检查开发者工具的 “Computed” 标签页，确认样式是否被更高优先级规则（比如内联
style或!important）覆盖
nth-child(odd) 和 nth-of-type(odd) 到底该用哪个？
nth-of-type 看起来更“智能”，但它在标准表格结构里反而容易失效：因为 thead 和 tbody 是不同父容器，tbody tr:nth-of-type(odd) 在 tbody 内部重新计数，和 nth-child 行为一致；而如果误写成 table tr:nth-of-type(odd)，则因 tr 不是 table 的直接子元素（中间隔着 thead/tbody），根本不会匹配任何行。
- 推荐统一用
tbody tr:nth-child(odd)，语义清晰、行为可预测 -
nth-of-type在非标准结构（如所有tr直接塞进table）下才有效，但这种写法不规范、难维护 - 别依赖注释或空格文本节点影响计数——它们确实参与
nth-child计算，但现代 HTML 编辑器和构建工具基本不会插入干扰节点
斑马纹颜色怎么选才不刺眼？
纯白 #fff 和深灰 #333 搭配会放大文字疲劳感，尤其长表格滚动时。背景色不是越对比越好看，而是要让行间区分足够、又不抢内容焦点。
- 优先用带透明度的浅灰：
background-color: rgba(245, 245, 245, 0.8)，比纯色柔和，且能透出底层边框 - 避免用
box-shadow或background-image实现条纹——绘制开销高，缩放时易出现 subpixel 错位 - 深色模式下必须单独定义：
@media (prefers-color-scheme: dark) { tbody tr:nth-child(even) { background-color: #2d2d2d; } } - 移动端小屏显示时，加
border-collapse: collapse和统一line-height，防止因渲染精度导致某几行颜色轻微偏移
IE8 兼容怎么办？
nth-child 在 IE8 完全无效，不是写法问题，是引擎不支持。这时候 CSS 方案彻底失效，必须换思路。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染时，给每行加上
class="row-odd"或class="row-even" - 前端 JS 方案：遍历
document.querySelectorAll("tbody tr")，按索引i % 2 === 0动态加类，注意要避开thead中的tr - 别用 polyfill（如 Selectivizr）——它靠 JS 模拟伪类，性能差，且在动态增删行时需手动触发重算
- 如果项目已放弃 IE8，就别为它写额外逻辑，现代浏览器原生支持足够稳定
