CSS 中 !important 覆盖了 hover 样式，导致奇数行无法响应悬停效果；移除 tbody tr:nth-child(odd) 规则中的 !important 即可修复。

css 中 `!important` 覆盖了 hover 样式，导致奇数行无法响应悬停效果；移除 `tbody tr:nth-child(odd)` 规则中的 `!important` 即可修复。

在为 HTML 表格添加行级 hover 效果时，一个常见却隐蔽的陷阱是 CSS 优先级冲突——尤其是滥用 !important 导致悬停样式被强制锁定。正如本例所示：尽管开发者已为所有

元素定义了 :hover 状态（如 tr:hover { background: lightblue; }），但 hover 效果却只在偶数行生效，奇数行始终维持白色背景。

根本原因在于以下这条 CSS 规则：

tbody tr:nth-child(odd) {
  background-color: white !important;
}

由于 !important 的存在，该声明的优先级远高于普通伪类选择器（如 tr:hover），即使鼠标悬停在奇数行上，浏览器仍会强制应用 white 背景色，从而“压倒” hover 样式，造成视觉上 hover 失效的假象。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

✅ 正确修复方式：
移除 !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;
}

? 调试小技巧：
在浏览器开发者工具中，将鼠标悬停于奇数行

元素上，查看“Computed”面板中的 background-color 值，并点击右侧的“Styles”标签页，观察哪条规则被划掉（strikethrough）——被划掉的即为被更高优先级规则覆盖的 hover 样式，由此可快速定位冲突源。

综上，hover 失效并非浏览器 Bug 或选择器语法错误，而是 CSS 优先级失衡所致。保持样式简洁、克制使用 !important、善用开发者工具验证，即可高效解决此类问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！