在CSS表格行交替高亮与鼠标悬停高亮之间，确实经常出现优先级冲突。实际上解决方案并不复杂，核心在于正确使用 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。纯 CSS 无法解决，必须借助 JavaScript。
- 监听
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 范围。
