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