:hover 样式未生效最常见的原因是普通状态选择器优先级更高，因伪类不提升特异性，需确保:hover与原选择器结构一致、特异性相同，或谨慎使用!important。
为什么 :hover 样式没生效？优先级被普通选择器压了
最常见的原因是普通状态的 CSS 规则优先级更高，比如 .btn { color: blue; } 和 .btn:hover { color: red; } 写在不同位置，而前者用了更具体的选择器（如 #header .nav li a），导致 :hover 被覆盖。
伪类本身不提升优先级 —— .btn:hover 的权重和 .btn 完全一样（都是 10），真正起作用的是整个选择器的特异性（specificity）。
- 检查浏览器开发者工具中被划掉的
: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)等触发硬件加速后，某些旧版浏览器对伪类响应有延迟或丢失
