:hover不生效的主因是基础颜色未定义，需显式声明a、a:link、a:visited颜色；:visited:hover禁用background-color等隐私敏感属性；应使用CSS变量统一管理状态色，并为移动端和焦点提供fallback。
写了 :hover 却没变色，大概率不是选择器写错了，而是基础颜色根本没定义——浏览器用 UA 默认样式顶掉了你的规则。
为什么 :hover 不生效？先检查这三件事
最常见原因是元素本身没显式声明默认颜色。比如只写 a:hover { color: red; }，但没写 a { color: #333; }，那浏览器仍沿用 UA 的蓝色，:hover 因为权重相同、后声明却无实际可覆盖的值，等于白写。
-
a:link和a:visited必须显式声明，否则已访问链接会回退到 UA 紫色，导致:hover在已访问状态下失效 - 用了 CSS Reset（如 Normalize.css），检查它是否把
a的color设成了inherit或unset - 如果父容器设了
color且选择器权重更高，子a:hover会被继承值覆盖，而不是你写的值
:visited:hover 改不了背景色是设计使然，不是 bug
现代浏览器出于隐私限制，:visited 只允许修改 color、background-color、border-color、outline-color 及其简写；但一旦和 :hover 组合（即 a:visited:hover），background-color 就被强制忽略——控制台不会报错，但样式就是不生效。
- 能安全用的只有文字颜色：
a:visited { color: purple; }✅ -
a:visited:hover { background-color: #f0f0f0; }❌ 完全无效 - 真要实现“已访问链接悬停反馈”，得靠 JS 记录状态并加
.visited类，再写.visited:hover
用 CSS 变量统一管理状态色，别硬写四遍颜色值
当按钮要支持 :hover、:active、:focus、:disabled 多种状态时，直接在每个伪类里写死颜色容易漏改、难维护。正确做法是抽成变量，在伪类中重定义变量本身，而非只改属性值。
立即学习“前端免费学习笔记（深入）”；
- 在
:root定义：--btn-bg: #007bff;，按钮默认样式用background-color: var(--btn-bg); -
.btn:hover { --btn-bg: #0056b3; }—— 改的是变量，不是background-color -
:disabled不能靠变量链式响应，必须单独赋值：.btn:disabled { background-color: #6c757d; }，因为禁用态通常要彻底脱离主题逻辑 - 过渡动画必须写在默认状态：
.btn { transition: background-color 0.2s ease; }，不能塞进:hover块里
移动端没有真正意义上的 hover，别只靠它做关键反馈
桌面端 :hover 是持续态，但移动端没有鼠标悬停概念。部分 iOS Safari 会在点击后短暂触发 :hover，Android Chrome 则基本不触发。依赖它做核心交互（比如展开菜单、显示工具提示）会导致体验断裂。
- 关键操作必须兼顾
:focus（键盘/辅助设备）和 JS 状态（如.is-open） - 若要用伪类模拟悬停反馈，至少补上
.btn:focus { outline: 2px solid var(--focus-ring); } - 避免用
transition: all;，它会尝试过渡background-position或transform，引发意外重绘
变量重定义、LVHA 顺序、移动端 fallback 这三点最容易被跳过，一漏就整块颜色逻辑断掉。写完记得用已访问链接、禁用按钮、焦点键盘导航三类场景手动点一遍，别只盯着鼠标悬停看。
