直接用 tbody tr:nth-child(odd/even) 实现隔行变色，tr:hover 实现悬浮高亮；需避免影响表头、处理 border-collapse 压制背景、注意 hover 在触控设备的兼容性及 css 特异性覆盖逻辑。
tr:nth-child(odd) 和 tr:hover 就够用了，不需要 JavaScript 或额外类名。
用 :nth-child 实现隔行变色
核心是直接作用于 tbody tr，避免影响表头 thead tr。浏览器从 1 开始计数，odd 对应第 1、3、5 行，even 对应第 2、4、6 行。
常见错误是写成 tr:nth-child(2n) 却忘了加 tbody 前缀，结果表头也被染色；或者误用 :nth-of-type（它按标签类型计数，不适用于有 thead/tbody 混排的结构）。
推荐写法：
tbody tr:nth-child(odd) { background-color: #f9f9f9; }
tbody tr:nth-child(even) { background-color: #ffffff; }
用 :hover 实现悬浮高亮
直接写 tr:hover 即可，但要注意：如果表格用了 border-collapse: collapse，悬停时背景色可能被边框“压住”，看起来不明显——此时给 tr 加 position: relative 并确保没有 z-index 冲突更稳妥。
另一个易踩的坑是：在某些旧版 IE（如 IE8 及更早）中，:hover 不支持非 a 标签，但现代项目基本不用考虑。若真要兼容，得用 JS 绑定 mouseenter/mouseleave。
示例：
tbody tr:hover { background-color: #e7aaaa; cursor: pointer; }
两者共存时的优先级和覆盖逻辑
CSS 规则是“后声明者胜”，但更关键的是 specificity（特异性）。tr:hover 和 tr:nth-child(odd) 特异性相同（都是一个标签选择器 + 一个伪类），所以谁写在后面谁生效。
这意味着：如果你希望悬停时完全覆盖隔行色，就把 tr:hover 放在 tr:nth-child() 后面；如果想让悬停色叠加一层半透明效果，就得用 rgba() 而不是纯色。
实用建议：
- 不要用
!important强行覆盖，容易失控 - 避免给
td单独设背景色，否则会盖掉tr的背景 - 如果表格有
sticky表头，thead tr必须单独重置背景，否则会被tbody tr:hover影响
移动端 touch 设备的 hover 行为差异
iOS Safari 和部分 Android 浏览器对 :hover 的触发不一致：第一次点击可能模拟 hover，第二次才真正触发 click；有些甚至完全忽略 hover。这不是 bug，而是浏览器主动降级交互以适配触控。
所以，别把关键功能（比如“点击展开详情”）只绑定在 :hover 上。如果需要触控友好，要么加 @media (hover: hover) 媒体查询做条件启用，要么用 JS 补充 touchstart 事件来 toggle 类名。
最简判断方式：
@media (hover: hover) and (pointer: fine) {
tbody tr:hover { background-color: #e7aaaa; }
}
隔行变色看着简单，但真正上线时最容易翻车的地方，其实是 thead 和 tbody 结构缺失、或用了 display: grid / flex 伪装表格——这时候 tr 选择器根本不起作用。先确认 HTML 是标准语义化表格，再调样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
