:nth-of-type在表格中常失效，是因为它按同级兄弟元素的标签类型计数，不跨thead/tbody等不同父容器，且会将thead中的tr计入序号，导致tbody内首行被误判为偶数行；正确做法是限定作用域为tbody tr:nth-of-type(odd)或使用tbody tr:nth-child(odd)。
为什么 :nth-of-type 在表格里常失效？
直接对 tr 用 tr:nth-of-type(odd) 看似合理，但实际在带 thead 或 tfoot 的表格中会出错——因为 :nth-of-type 是按兄弟元素的标签类型计数，不是按视觉行序。比如 thead > tr 和 tbody > tr 是不同父级下的兄弟，:nth-of-type 不跨父容器计算，且会把 thead 里的 tr 也算进去，导致 tbody 中第一行可能被当成“偶数行”。
正确写法：限定作用域 + 用 :nth-child 更稳妥
真正可控的做法是缩小选择器范围，并优先考虑 :nth-child（它按父元素下所有子元素位置计数，更符合“第几行”的直觉）：
- 给表格加 class，例如
<table class="data-table"> - 写成
.data-table tbody tr:nth-child(odd) { background: #f5f5f5; }—— 明确只作用于tbody内的tr，且按其在tbody中的位置编号 - 如果必须用
:nth-of-type，得确保tbody是唯一包含tr的容器，且无其他同类型兄弟（如避免caption、colgroup干扰）
:nth-of-type 和 :nth-child 在表格中的关键差异
假设 HTML 结构为：
<table>
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr><td>Alice</td></tr>
<tr><td>Bob</td></tr>
</tbody>
</table>
此时：
立即学习“前端免费学习笔记（深入）”；
-
tbody tr:nth-child(1)匹配 Alice 行（它是tbody的第一个子元素） -
tbody tr:nth-of-type(1)同样匹配 Alice 行（因为tbody下只有tr这一种类型） - 但若
tbody里混入<div>或注释节点，:nth-child会跳过它们继续计数，而:nth-of-type只统计tr类型，位置序号不变 - 性能上无明显差别，但可维护性上
:nth-child更贴近“奇偶行”的业务语义
兼容性与兜底方案
IE8 不支持 :nth-child 和 :nth-of-type，如果需兼容：
- 服务端渲染时直接输出
class="odd"/class="even" - 前端 JS 动态添加（简单循环
tr，用i % 2 === 0判断） - CSS 里保留现代写法作为主逻辑，不为 IE8 单独写 hack —— 实际项目中，纯 CSS 奇偶变色已基本可放弃 IE8
真正容易被忽略的是：表格结构是否规范。比如漏写 tbody，浏览器会自动补全，但补全后 DOM 结构和预期不一致，:nth-of-type 就可能从 tr 变成从 tbody 开始计数——检查 Elements 面板看真实 DOM 层级，比死磕选择器更有用。
