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