tr:nth-of-type(even)不生效是因为该伪类按同级兄弟元素的标签类型和顺序计数，而非视觉行号；正确写法是限定作用域为tbody tr:nth-of-type(even)，避免thead干扰。
为什么 tr:nth-of-type(even) 有时不生效
直接写 tr:nth-of-type(even) { background: #f5f5f5; } 却发现偶数行没变色，大概率是因为表格里混入了 thead、tbody 或 tfoot —— :nth-of-type 是按**同级兄弟元素的标签类型和顺序**计数的，不是按视觉上的“第几行”。比如 thead 里有 1 个 tr，那第一个 tbody tr 实际是整个 table 的第 2 个 tr，会被当成 even；但如果你只在 tbody 内部选，它就变成第 1 个，归为 odd。
正确写法：明确作用域，优先用 tbody tr:nth-of-type(even)
绝大多数带表头的表格，数据行都在 tbody 里。给 tbody 加限定，才能让 nth-of-type 真正按数据行编号：
tbody tr:nth-of-type(even) {
background-color: #f9f9f9;
}
- 必须写
tbody tr，不能只写tr（否则会把thead tr也算进去） - 如果表格没写
tbody，浏览器会自动补上，但 CSS 选择器仍需显式写出才能精准匹配 - 不要用
tr:nth-child(even)替代——它按所有子节点位置算（含th、td），更不可靠
遇到 colspan 或嵌套表格时怎么办
只要 tr 元素本身没被拆分或动态插入，nth-of-type 就不受 colspan、rowspan 或单元格内容影响。但要注意：
- 如果某行是通过 JS 动态插入到
tbody开头，它会变成新的第 1 个tr，原第 1 行变第 2 行，着色会整体偏移 - 嵌套表格中的
tr属于内层table，不影响外层tbody的计数，无需额外处理 - 若需稳定按“数据序号”着色（比如导出 Excel 时对齐），建议改用 JS 手动加 class，而非依赖 CSS 伪类
兼容性与性能提醒
:nth-of-type 在 IE9+ 和所有现代浏览器都支持，没问题。但要注意：
- 在超长表格（>5000 行）中，反复重排重绘可能卡顿，此时建议用
will-change: background-color或改用background-image渐变模拟条纹 - 如果用了 CSS-in-JS 库（如 Emotion），确保选择器字符串没被意外转义，比如写成
`tbody tr:nth-of-type(even)`而不是拼错括号 - 移动端 Safari 对复杂选择器链稍慢，避免写成
table tbody tr:nth-of-type(even) td这种多层嵌套
tr 是否真的处于同一父容器且顺序未被干扰——DOM 结构比样式规则更容易出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
