应将 :nth-child(odd/even) 直接作用于 tr 元素，而非 table 或 tbody；若有 thead，则需用 tbody tr:nth-child(odd/even) 避免序号干扰；:nth-of-type(tr) 更鲁棒；css 变量可实现主题切换。
直接用 :nth-child(odd) 和 :nth-child(even) 就行，但要注意作用对象是 <tr><p>别写成 <code>table:nth-child(odd) 或套在 <tbody> 上再设子元素——<code>:nth-child 是针对**父元素下的直接子元素序号**计算的。表格里真正需要交替变色的是 <tr>，所以样式必须挂到 <code>tr 上。
常见错误现象：
– 全表只有一行变色（可能误选了 td 或 tbody）
– 奇偶错位（比如第一行没变色，第二行却是“odd”色——因为表头 <th> 占了序号）
<ul><li>如果表格有 <code><thead>，且里面含 <code><tr>，那它会参与 <code>:nth-child 计数，导致 tbody 里的第一行变成第2、第4…个 tr
tbody tr 单独写选择器，避开表头干扰tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-child(even) {
background-color: #ffffff;
}
遇到带 <colgroup></colgroup> 或多层嵌套 <tr> 时，<code>:nth-child 还管用吗
不管用。:nth-child 只看 DOM 树中同级兄弟节点的物理位置，不识别语义或渲染层级。如果表格里插了 <tr class="divider"> 或展开行（如 <code><tr class="detail-row">），它们也会被计入序号，破坏奇偶规律。
<p>使用场景：<br>– 纯数据表格、无额外结构干预<br>– 需要服务端渲染或静态 HTML 的简单列表</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>动态增删行时，序号实时重算，无需手动维护类名</li>
<li>但若需固定“数据行”的奇偶性（比如折叠后仍保持原色），就得改用 JS 控制 <code>class 或改用 :nth-of-type()（前提是所有目标 tr 类型一致，且中间没混入其他标签）
:nth-of-type(tr) 比 :nth-child() 更鲁棒些，只要中间没插别的标签（如 <div>），它就只数 <code>tr 标签
:nth-child(2n) 和 :nth-child(even) 有区别吗
没有区别，even 就是 2n 的别名，odd 等价于 2n+1。但写法影响可读性和兼容性：
-
tr:nth-child(even)更直观，IE9+ 支持 -
tr:nth-child(2n)语义稍弱，但和复杂公式（如3n+1）风格统一 - 别用
tr:nth-child(n)——这等于选所有tr，毫无意义 - 注意空格：
tr :nth-child(odd)（带空格）会匹配tr内部的 odd 子元素，不是你要的
用 CSS 变量配合 :nth-child 实现主题切换背景色
如果项目支持亮/暗主题，硬编码颜色值会增加维护成本。可以把颜色抽成 CSS 变量，在根节点或表格上动态切换：
:root {
--row-odd-bg: #f9f9f9;
--row-even-bg: #ffffff;
}
.dark-theme {
--row-odd-bg: #2d2d2d;
--row-even-bg: #3a3a3a;
}
tbody tr:nth-child(odd) {
background-color: var(--row-odd-bg);
}
tbody tr:nth-child(even) {
background-color: var(--row-even-bg);
}
这样只需切一个 class，整张表的奇偶色就同步更新。但注意：变量必须定义在能被继承或查找到的作用域，:root 最稳妥；若表格单独封装，可在 table 元素上设变量并用 inherit 向下透传。
容易被忽略的一点：CSS 变量不触发重排，但大量表格行 + 复杂渐变背景时，:nth-child 规则本身不会带来性能问题，真正卡顿往往来自背景图、阴影或未优化的 transform 动画。
