最直接的隔行变色方案是使用 :nth-child(odd) 和 :nth-child(even)，需限定作用域避免 thead 干扰；悬停高亮用 tr:hover 且置于隔行规则之后；rowspan 会导致 :nth-child 失效，需 JS 或 data 属性替代；注意 Safari 触屏兼容性及色觉障碍对比度。
用 :nth-child(odd) 和 :nth-child(even) 实现基础隔行变色
现代浏览器下，最直接、性能最好、无需 JS 的方式就是这两个伪类。它们按 DOM 中 tr 元素的顺序编号（从 1 开始），不依赖内容或属性，稳定可靠。
常见错误是写成 tbody tr:nth-child(odd) 却忘了 thead 或 tfoot 里的 tr 也会被计入计数，导致样式错位。正确做法是限定作用域：
- 如果表格有
thead，用tbody tr:nth-child(odd)—— 这样只对数据行生效 - 如果所有
tr都要参与隔行（含表头），就用table tr:nth-child(odd) - 避免用
:nth-of-type，它在有th行混排时行为不稳定
示例：
tbody tr:nth-child(odd) { background-color: #f9f9f9; }
tbody tr:nth-child(even) { background-color: #ffffff; }
用 tr:hover 实现鼠标悬浮高亮，但要注意层叠顺序
tr:hover 本身很简单，但和隔行色叠加时容易出问题：悬停态会覆盖原本的奇偶背景，可一旦移开，又得恢复正确颜色——这靠纯 CSS 就能搞定，不需要 JS。
关键点在于 CSS 优先级和声明顺序：
- 把
tr:hover写在隔行规则之后，确保它能覆盖 - 不要用
!important，否则后续想用 JS 切换选中态会冲突 - 若表格用了
border-collapse: collapse，记得给tr:hover td, tr:hover th统一设背景，避免边框缝隙漏底色
示例：
tbody tr:hover { background-color: #e6f7ff !important; }
/* 注意：这里加 !important 是为了压过某些 inline style 或高权重要求，但日常开发中尽量不用 */
合并单元格（rowspan）会让 :nth-child 失效
这是最容易踩的坑：:nth-child 只看标签位置，不管视觉行高。一个 tr 里有个 td rowspan="3"，后面两行在视觉上“空缺”，但 :nth-child 依然按物理 tr 标签递增，结果隔行色错位。
此时纯 CSS 无解，必须换思路：
- 用 JS 遍历
tr，跳过被合并覆盖的行，手动加 class（如zebra-odd） - 或者改用
:nth-of-type+ 严格结构控制（前提是所有tr类型一致，且没有动态插入） - 更稳妥的是放弃自动计算，给每行显式加
data-row-index，再用属性选择器匹配奇偶
比如：tr[data-row-index="odd"] { ... }，由后端或初始化脚本注入值。
兼容性与可访问性不能只看 Chrome
:nth-child 和 :hover 在 IE9+、Edge、Firefox、Safari 都支持良好，但有两个隐藏雷区：
- 在 macOS Safari 上，
tr:hover对触屏设备（如 iPad）默认不触发，需加cursor: pointer才能激活 hover 状态 - 色差不足会影响色觉障碍用户，建议用 Lighthouse 检查对比度，
background-color和文字色对比至少达 4.5:1 - 如果表格支持键盘导航（Tab 进入），仅靠
:hover不够，还得补tr:focus-within或用 JS 监听focus事件加 class
真正难的不是写出来，而是让隔行色在 rowspan、键盘焦点、深色模式、缩放 200% 下都保持可用——这些往往要到测试阶段才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
