CSS中link、visited、hover、active必须按LVHA顺序声明，否则样式会被覆盖；:visited受隐私限制仅支持有限颜色修改，且必须显式声明以避免:hover失效。
link、visited、hover、active 的声明顺序不能乱
浏览器按 a:link → a:visited → a:hover → a:active 的顺序匹配，如果顺序错（比如把 :hover 写在 :link 前面），部分样式会被覆盖。这是最常被忽略的底层规则。
-
:link只对未访问过的链接生效 -
:visited只对已访问过的链接生效，且受浏览器限制（不能读取颜色以外的大部分样式，比如不能改background-color或font-size） -
:hover在鼠标悬停时触发，支持所有元素，不限于<a></a> -
:active仅在鼠标按下瞬间（点击未松开时）生效，持续时间极短
基础写法示例（必须按 LVHA 顺序）
/* 正确：Link → Visited → Hover → Active */
a:link {
color: #0066cc;
}
a:visited {
color: #663399;
}
a:hover {
color: #ff6600;
}
a:active {
color: #cc0000;
}注意：a:link 和 a:visited 必须显式声明，否则 :hover 和 :active 在未访问/已访问状态下可能不生效——尤其是 :visited 被省略后，已访问链接会回退到浏览器默认色（通常是紫色），导致 :hover 看起来“失效”。
常见错误：hover 不生效或只对部分链接起作用
问题往往不是伪类写错了，而是 CSS 优先级或继承干扰了结果：
- 父元素设置了
color，且选择器权重更高，会覆盖a:hover - 用了
a:hover span这类嵌套写法，但实际 HTML 中文字不在<span></span>里 - 在
<a href="#">文本</a>中，#是空锚点，浏览器认为“已访问”，所以直接走:visited样式，:hover看似没反应 - 某些框架（如 Bootstrap）重置了
a标签的text-decoration，导致悬停时下划线不出现，误以为 hover 没生效
移动端 hover 的兼容性问题
iOS Safari 和 Android Chrome 对 :hover 支持有限：默认不触发，除非用户真“悬停”（实际是模拟的 tap delay）。更可靠的做法是用 :active 配合 touchstart 事件，或改用 JavaScript 监听 pointerdown 添加临时 class。
立即学习“前端免费学习笔记（深入）”；
如果坚持用纯 CSS，可加一行增强响应：
a {
-webkit-tap-highlight-color: transparent;
}
a:active {
opacity: 0.7;
}这能让点击瞬间有视觉反馈，弥补 :hover 在触摸设备上的缺失。不过要注意：opacity 变化会影响整个链接（含子元素），若只需改文字颜色，仍建议用 color 单独控制。
真正麻烦的是 :visited 的隐私限制——你没法通过 JS 读取它是否被访问过，CSS 里也不能用 transition 动画它，连 color 都只能设为有限的系统色或灰度值。这点很容易在做动态主题时翻车。
