:hover 样式未生效最常见的原因是普通状态选择器优先级更高，因伪类不提升特异性，需确保:hover与原选择器结构一致、特异性相同，或谨慎使用!important。

为什么 :hover 样式没生效？优先级被普通选择器压了

最常见的原因是普通状态的 CSS 规则优先级更高，比如 .btn { color: blue; } 和 .btn:hover { color: red; } 写在不同位置，而前者用了更具体的选择器（如 #header .nav li a），导致 :hover 被覆盖。

伪类本身不提升优先级 —— .btn:hover 的权重和 .btn 完全一样（都是 10），真正起作用的是整个选择器的特异性（specif

• 检查浏览器开发者工具中被划掉的 :hover 声明，看是哪条规则覆盖了它
• 避免靠后写就“一定生效”：CSS 加载顺序只在优先级相同时起作用
• 如果基础类用了 ID 选择器（如 #main-btn），那仅用 .btn:hover 几乎不可能赢过它

怎么安全提高 :hover 优先级？复用原选择器结构

最稳妥的方式是让 :hover 版本和原选择器保持一致的结构和特异性，而不是盲目加 !important 或堆砌类名。

例如，如果正常状态是 article.post .title，那就写成：

立即学习“前端免费学习笔记（深入）”；

article.post .title {
  color: #333;
}
article.post .title:hover {
  color: #007bff;
}

• 这样两者 specificity 完全相同（11–1），生效与否只取决于源码顺序
• 比单独写 .title:hover 更可靠，也比 .title:hover, article.post .title:hover 这种冗余写法更易维护
• 如果原选择器用了 !important，:hover 版本也得加，否则仍会被覆盖

!important 能用吗？能，但只该用在“补救”场景

!important 是有效的兜底手段，但不该是第一反应。它会破坏样式可预测性，尤其在组件化或多人协作项目里容易引发连锁覆盖。

• 只在无法修改原始选择器（如第三方 UI 库的 CSS）、且必须覆盖时使用
• 写法必须带空格：color: red !important;，不是 !important 独立成行
• 多个 !important 并存时，仍按特异性+顺序判断，不是“谁在后面谁赢”
• Vue/React 中内联样式、style 绑定默认比外部 CSS 优先级高，此时 !important 反而可能失效

还有哪些容易被忽略的覆盖原因？

除了优先级，:hover 失效还常因 DOM 状态或 CSS 机制本身被误判。

• :hover 不支持非鼠标设备（如触摸屏上的首次点击不会触发，需配合 :active 或 JS 模拟）
• 父元素设置了 pointer-events: none，子元素所有伪类（包括 :hover）都会失效
• CSS 层叠中，继承属性（如 color）受父级影响，而 :hover 改的是当前元素，若父级颜色更深，可能视觉上“看不出变化”
• 使用了 will-change: transform 或 transform: translateZ(0) 等触发硬件加速后，某些旧版浏览器对伪类响应有延迟或丢失