tr:hover与:nth-child冲突时，应通过更具体的选择器（如tbody tr:hover、tr:nth-child(even):not(:hover)）明确优先级，避免!important，排除thead干扰，并统一box-sizing和背景渲染范围。
直接用 tr:hover + :nth-child 组合就能实现，但顺序、优先级和边界情况不处理好，高亮会失效或错乱。
tr:hover 和 :nth-child(even/odd) 冲突时怎么办
两者同时存在时，:nth-child 规则如果写在 tr:hover 后面，会覆盖 hover 的背景色；反过来，hover 又可能盖掉隔行色。关键不是“谁写在前面”，而是“谁更具体”。
-
tr:nth-child(even):not(:hover)显式排除悬停状态，比单纯tr:nth-child(even)优先级更高 - 把
tr:hover放在所有:nth-child规则之后，确保它最终生效 - 避免用
!important，它会让后续维护变脆——比如加个表头高亮需求时容易互相打架
表头（thead）干扰 hover 效果
默认 tr:hover 会匹配 thead tr，但多数场景下你不希望表头跟着变色。浏览器渲染时，thead tr 和 tbody tr 是同级元素，伪类无法自动区分。
- 显式排除：
tbody tr:hover { background-color: #f0f8ff; } - 或者重置表头 hover：
thead tr:hover { background-color: transparent; } - 如果用了
border-collapse: collapse，还要确认th没有独立background，否则会遮住tr的 hover 背景
移动端点击后 hover 状态残留问题
iOS 和部分 Android 浏览器在 tap 后会触发一次 :hover，且不自动清除，导致某行“卡在高亮态”。这不是 bug，是 UA 的模拟行为。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 无解，必须加 JS 监听
touchstart或click，临时移除 hover 类（如给tr加.no-hover并设.no-hover:hover { background: none; }） - 更轻量的做法：用
pointer-events: none关闭thead th的 hover 响应，减少误触面 - 如果表格支持点击选中，建议放弃 hover，改用
.selected类控制——这样 iOS/Android 体验一致，也方便键盘导航
最易被忽略的是 border-collapse: collapse 和单元格 padding 对 hover 视觉连续性的影响：哪怕 tr 设了背景，若 td 有 padding 或 border，高亮区域会出现“断层”。务必统一用 box-sizing: border-box 并检查 computed styles 中的 background rendering 范围。
