CSS 中 !important 覆盖了 hover 样式，导致奇数行无法响应悬停效果；移除 tbody tr:nth-child(odd) 规则中的 !important 即可修复。
css 中 `!important` 覆盖了 hover 样式，导致奇数行无法响应悬停效果；移除 `tbody tr:nth-child(odd)` 规则中的 `!important` 即可修复。
在为 HTML 表格添加行级 hover 效果时，一个常见却隐蔽的陷阱是 CSS 优先级冲突——尤其是滥用 !important 导致悬停样式被强制锁定。正如本例所示：尽管开发者已为所有 <tr> 元素定义了 :hover 状态（如 tr:hover { background: lightblue; }），但 hover 效果却只在偶数行生效，奇数行始终维持白色背景。
根本原因在于以下这条 CSS 规则：
tbody tr:nth-child(odd) {
background-color: white !important;
}由于 !important 的存在，该声明的优先级远高于普通伪类选择器（如 tr:hover），即使鼠标悬停在奇数行上，浏览器仍会强制应用 white 背景色，从而“压倒” hover 样式，造成视觉上 hover 失效的假象。
✅ 正确修复方式：
移除 !important，并确保 hover 规则具有足够且合理的特异性（specificity）。推荐写法如下：
/* 移除 !important，让 hover 可以正常覆盖 */
tbody tr:nth-child(odd) {
background-color: white;
}
tbody tr:nth-child(even) {
background-color: #fce8c3;
}
/* hover 效果对所有行统一生效 */
#project-deep-dive-table tbody tr:hover {
background-color: lightblue !important; /* 可选：加 !important 确保覆盖，但非必须 */
}⚠️ 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- 避免在基础状态样式中滥用 !important，它会破坏 CSS 的层叠逻辑和可维护性；
- 若需确保 hover 样式生效，可适当提升其选择器特异性（例如使用 #id tbody tr:hover），而非依赖 !important；
- 检查是否有其他样式（如内联 style、JavaScript 动态设置 backgroundColor 或 background）意外覆盖 hover 效果；
- 在复杂表格中（含 sticky header、嵌套元素等），建议使用 :has()（现代浏览器支持）或为 hover 添加过渡动画增强体验：
#project-deep-dive-table tbody tr {
transition: background-color 0.2s ease;
}? 调试小技巧：
在浏览器开发者工具中，将鼠标悬停于奇数行 <tr> 元素上，查看“Computed”面板中的 background-color 值，并点击右侧的“Styles”标签页，观察哪条规则被划掉（strikethrough）——被划掉的即为被更高优先级规则覆盖的 hover 样式，由此可快速定位冲突源。
综上，hover 失效并非浏览器 Bug 或选择器语法错误，而是 CSS 优先级失衡所致。保持样式简洁、克制使用 !important、善用开发者工具验证，即可高效解决此类问题。
