如何运用CSS选择器实现复杂的表格行交替高亮效果？

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