:nth-child(odd)隔行变色失效主因是tr父元素非table或兄弟节点干扰索引，应改用tbody tr:nth-of-type(odd)并手动写tbody；hover需增强对比度，动态增删行后css自动重算。
直接用 常见原因是：CSS 选择器写成了 单纯隔行变色后加 最常被忽略的一点：当表格列内有 :nth-child(odd) 就能实现隔行变色，但必须确保目标元素是 <tr> 且没有被其他元素（比如 <code><thead>、<code><tbody> 或嵌套 <code><div>）干扰索引计算。
<h3>为什么 <code>:nth-child(odd) 有时不生效
table tr:nth-child(odd)，但 <tr> 的父元素其实是 <code><tbody>（浏览器自动插入），而 <code><tbody> 里可能还有 <code><tr> 属于表头或分组行；或者 HTML 中 <code><tr> 前混入了 <code><th>、<code><caption></caption> 等兄弟节点，导致 odd 计算错位。
<tr> 的直接父容器和兄弟节点类型
<li>优先用 <code>tbody tr:nth-child(odd) 替代 table tr:nth-child(odd)
<thead>，它里面的 <code><tr> 也会被计入 <code>:nth-child 计数 —— 此时改用 tbody tr:nth-child(odd) 才只作用于数据行
更稳妥的写法：用
:nth-of-type() 或显式包裹 <tbody><p><code>:nth-of-type() 只统计同类型（即 <tr>）兄弟元素，不受中间混入其他标签影响；而手动写出 <code><tbody> 能让结构更可控，也便于后续 JS 操作。
<ul>
<li>推荐写法：<code>tbody tr:nth-of-type(odd) { background: #f5f5f5; }
<tbody>，浏览器会自动补全，但补全位置不可靠 —— 建议手写 <code><tbody> 包裹所有数据行
<li>
<code>:nth-of-type(odd) 在 IE9+ 支持，:nth-child(odd) 同样，两者兼容性无差别配合 hover 和可访问性要注意什么
tr:hover 很容易覆盖掉背景色，导致悬停时看不出变化；同时，纯色块对比度不够可能影响色觉障碍用户阅读。
tr:hover { background: #e0e0e0 !important; }，或叠加边框/阴影<tr> 后，<code>:nth-child 会自动重算，无需 JS 干预
colspan 或 rowspan 时，视觉上的“行”和 DOM 中的 <tr> 仍是一一对应的，伪类不会出错；但若用 JS 动态删行又没触发重排，可能残留旧样式 —— 这时候别硬调 CSS，该刷新状态就刷新状态。</tr>
