CSS 中为表格行设置 hover 背景色时，若奇数行（odd）规则使用了 !important，会强制覆盖后续所有 hover 状态下的背景色声明，导致悬停效果无法生效——移除该声明即可恢复完整交互。
css 中为表格行设置 hover 背景色时，若奇数行（odd）规则使用了 `!important`，会强制覆盖后续所有 hover 状态下的背景色声明，导致悬停效果无法生效——移除该声明即可恢复完整交互。
在实际开发中，表格行 hover 效果失效却仅影响奇数行，往往并非选择器优先级或结构问题，而是被一条看似无害的 !important 意外“锁死”了样式继承链。观察原始 CSS 可发现关键线索：
tbody tr:nth-child(odd) {
background-color: white !important; /* ⚠️ 问题根源 */
}该规则强制将所有奇数行背景设为白色，且因 !important 的最高优先级，它会压制后续任何针对 tr:hover 的背景色声明（例如 tr:hover { background: lightblue; }），即使 hover 伪类本身权重更高，也无法突破 !important 的封锁。
✅ 正确修复方式：
移除 !important，并确保 hover 规则具有足够优先级（通常无需额外修饰）：
/* ✅ 推荐写法：移除 !important，保持语义清晰 */
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: #add8e6 !important; /* 可选：加 !important 确保覆盖，但非必需 */
}⚠️ 注意事项：
- !important 应谨慎使用，尤其在基础状态样式（如 :nth-child）中滥用，极易引发 hover、focus 等交互状态失效；
- 若需兼容旧版浏览器（如 IE），避免依赖 :nth-child 与 :hover 的组合，但现代项目中此非主要风险；
- 建议统一 hover 样式作用于 <tbody> 内所有 <tr>，而非分别写 odd:hover 和 even:hover，既简洁又避免遗漏；
- 使用开发者工具（DevTools）检查元素的“Computed”面板，可快速识别是否被 !important 强制覆盖（被划掉的样式即表示被更高优先级规则拦截）。
总结：表格 hover 失效的“奇偶不对称”现象，90% 源于基础状态样式中误用 !important。养成审查 CSS 声明中 !important 使用场景的习惯，是保障交互样式可靠性的关键实践。
立即学习“前端免费学习笔记（深入）”；
