a:hover被a:visited覆盖主因是声明顺序错误，导致已访问链接仅匹配:visited而跳过:hover；正确顺序为a:link→a:visited→a:hover→a:active，且:visited仅支持有限颜色属性，复杂交互应改用JS添加class实现。
a:hover被a:visited覆盖，是因为声明顺序错了
浏览器把a:link、a:visited、a:hover、a:active当作权重完全相同的规则，只按源码顺序层叠。如果你把a:visited写在a:hover后面，那么已访问链接就永远匹配不到a:hover——它根本不会进入匹配流程，而是直接被a:visited的同名属性（比如color）覆盖。
这不是 bug，是 CSS 层叠逻辑本身决定的：已访问链接只触发:visited状态，:hover只是叠加态，但叠加的前提是它得先被识别出来。顺序一错，:hover就被跳过了。
为什么a:visited:hover不是万能解法
a:visited:hover语法合法，也能生效，但它解决不了根本问题，反而容易引入新坑：
- 它要求你为每种组合都单独写一遍样式，维护成本高
- 部分旧版 Safari 会把
a:visited:hover解析为a:hover:visited，语义反直觉且行为不稳定 - 现代浏览器对
:visited的限制依然存在——即使写了a:visited:hover，你也只能改color、border-color等极少数属性，font-size、transform、background-image全都会静默失败 - 移动端不触发
:hover，这个写法在触摸设备上基本无效
真正该做的三件事
别指望靠调整伪类顺序“修好”所有交互需求，优先级和能力边界才是关键约束：
- 严格按
a:link→a:visited→a:hover→a:active顺序写，中间不插其他规则，连注释都别放——某些旧引擎会因此解析异常 - 不要给
a:visited设非颜色类样式，比如text-decoration用text-decoration-color替代，opacity或transition直接放弃 - 需要深度定制已访问状态（比如加图标、改背景、做动画），必须用 JS 记录点击并添加 class，再用
.visited这类自定义类控制，而不是押宝:visited
调试时最容易忽略的一点
DevTools 里看到a:hover规则被划掉（strikethrough），不一定是被覆盖了——它可能压根没匹配成功。先右键元素 → “Force element state” → 手动勾选:hover，看样式是否立刻出现。如果能强制生效，说明问题不在 CSS 写法，而在触发条件（比如父元素pointer-events: none，或元素本身不可悬停）。真正麻烦的从来不是顺序记不住，而是误以为:visited还能干它已经不能干的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
