想让第1、3、5行变色用tr:nth-child(odd)，第2、4、6行变色用tr:nth-child(even)；需限定为tbody tr:nth-child(odd)避免thead干扰，nth-of-type在表格中失效因tr兄弟节点含非tr元素。
用 tr:nth-child(odd) 还是 tr:nth-child(even)？
直接给结论：想让第 1、3、5 行变色，用 tr:nth-child(odd)；想让第 2、4、6 行变色，用 tr:nth-child(even)。注意这不是“奇数行/偶数行”的自然语义，而是严格按 DOM 中 tr 元素的顺序位置匹配——哪怕表格里有 thead、tbody 或 colgroup，只要 tr 是子元素，就参与计数。
常见错误是把样式写在 tbody tr 上却忘了 thead tr 也会被 tr:nth-child() 计入，导致第一行（表头）意外变色。稳妥做法是限定作用范围：
tbody tr:nth-child(odd) {
background-color: #f5f5f5;
}
为什么 nth-of-type 在表格里基本没用？
tr:nth-of-type(odd) 看似更“语义化”，但它依赖兄弟元素中同类型标签的数量。而 HTML 表格结构中，tr 的兄弟节点往往混有 thead、tbody、tfoot 等容器，它们不是 tr，所以 tr:nth-of-type 实际上退化为“所有 tr”，失去隔行意义。实测中它和 tr 无差别选择器效果一致，无法实现斑马纹。
除非你手动把所有 tr 写在同一层（比如全塞进一个 tbody 且不用 thead），否则别碰 nth-of-type。
立即学习“前端免费学习笔记（深入）”；
兼容性与边界情况要注意什么？
- IE8 及更早版本完全不支持
:nth-child()，如果必须兼容，得用 JS 动态加 class 或服务端渲染 class - 如果表格用了
display: table模拟（比如 div 套 div），nth-child依然有效，但前提是这些 div 真的是父容器的直接子元素且顺序连续 - 合并单元格（
rowspan）不影响nth-child计数，它只看tr标签存在与否，不看视觉行高 - 动态插入
tr（如 JS append）后，样式会自动生效，无需手动重算
要不要用 tbody 包裹所有数据行？
要。这是最实际的工程习惯，原因有三：
- 避免
thead或tfoot中的tr干扰nth-child计数 - 语义清晰，利于可访问性（screen reader 能区分表头与数据）
- 方便单独对数据区做样式控制（比如固定表头滚动时只让
tbody滚动）
标准写法示例：
| 姓名 | 年龄 |
|---|---|
| 张三 | 28 |
| 李四 | 32 |
| 王五 | 25 |
对应 CSS 就写 tbody tr:nth-child(odd)，干净利落。
真正容易被忽略的是：当表格内容为空（tbody 里没 tr），或者只有 1 行时，nth-child(odd) 仍会命中那唯一一行——这本身没错，但如果你期望“至少两行才开始隔色”，就得靠 JS 或后端逻辑控制 class 的添加时机。
