应使用 tbody tr:nth-of-type(odd) 和 tbody tr:nth-of-type(even)，因浏览器自动补全 tbody 导致 table tr:nth-child 失效，且 :nth-of-type 只统计 tr 兄弟元素，避免 thead、caption 等干扰计数。
直接用 tr:nth-child(odd) 或 tr:nth-child(even) 就能实现，但绝大多数失效问题都出在 DOM 结构没理清——不是选择器写错了，是它根本没匹配到你想要的 tr。
为什么 table tr:nth-child(odd) 经常不生效
浏览器会自动补全 <tbody>，所以你写的 <tr> 实际上是 <tbody> 的子元素，而不是 <table> 的直系子元素。此时 table tr:nth-child(odd) 会去 table 下所有子节点里数：比如 <thead> 里的 <tr> 算第 1 个，<tbody> 里第一个数据行就变成第 2 个，结果偶数行被染色，完全反了。
- 打开 DevTools，右键检查任意一行
<tr>，看它的父节点是不是<tbody>（99% 是） - 如果 HTML 里写了
<thead>，它里面的<tr>会被计入:nth-child()计数，干扰后续行序号 - 注释、空格文本节点不影响；但
<caption>、<colgroup>这类标签会参与计数
最稳妥的写法：显式限定 <tbody> + :nth-of-type()
用 tbody tr:nth-of-type(odd) 能绕过兄弟节点干扰，只统计 <tr> 类型的兄弟元素，不管中间有没有 <th> 或 <caption>。
- 必须手写
<tbody>包裹所有数据行——别依赖浏览器自动补全，位置不可控 -
:nth-of-type()和:nth-child()在 IE9+ 兼容性一致，无需降级考虑 - 示例：
tbody tr:nth-of-type(odd) { background-color: #f9f9f9; } tbody tr:nth-of-type(even) { background-color: #ffffff; }
配合 :hover 和颜色变量时的坑
tr:hover 默认会覆盖隔行背景色，导致悬停时看不出变化；纯靠颜色区分还可能违反可访问性要求。
立即学习“前端免费学习笔记（深入）”；
- 加
!important不是好办法，优先用更具体的选择器，比如tbody tr:hover - 背景色差建议 ΔE > 15，可用 Chrome DevTools 的「Contrast」面板校验
- 颜色变量要定义在作用域内：写在
:root或table上，再用var(--row-odd-bg)引用；别在tr行内 style 里动态设变量，:nth-child不响应变量值变化
动态增删行后样式还对吗
CSS 伪类是实时重算的，只要 DOM 中 <tr> 节点插入/删除正确，:nth-of-type() 会自动更新——但前提是没用 JS 错误地只改了 innerHTML 或删了节点却没触发重排。
- 用
document.createElement('tr')+appendChild()是安全的 - 如果用了
innerHTML = newHtml，整段重写，浏览器会重建节点，伪类自然重算 - 最常被忽略的是：表格里有
rowspan时，视觉“行”和 DOM<tr>并不一一对应，但伪类只认 DOM 结构，不会错——看起来“断掉”是人眼预期问题，不是 CSS 失效
