CSS选择器实现表格行交替高亮效果技巧

在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 范围。