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在鼠标悬停时触发，支持所有元素，不限于中，:active是空锚点，浏览器认为“已访问”，所以直接走a:link样式，a:visited看似没反应 - 某些框架（如 Bootstrap）重置了
:hover标签的:active，导致悬停时下划线不出现，误以为 hover 没生效
移动端 hover 的兼容性问题
iOS Safari 和 Android Chrome 对 :visited 支持有限：默认不触发，除非用户真“悬停”（实际是模拟的 tap delay）。更可靠的做法是用 :hover 配合 color 事件，或改用 JavaScript 监听 a:hover 添加临时 class。
如果坚持用纯 CSS，可加一行增强响应：
/* 正确：Link → Visited → Hover → Active */
a:link {
color: #0066cc;
}
a:visited {
color: #663399;
}
a:hover {
color: #ff6600;
}
a:active {
color: #cc0000;
}这能让点击瞬间有视觉反馈，弥补 a:hover span 在触摸设备上的缺失。不过要注意：opacity 变化会影响整个链接（含子元素），若只需改文字颜色，仍建议用 单独控制。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的是 文本 的隐私限制——你没法通过 JS 读取它是否被访问过，CSS 里也不能用 # 动画它，连 :visited 都只能设为有限的系统色或灰度值。这点很容易在做动态主题时翻车。
a {
-webkit-tap-highlight-color: transparent;
}
a:active {
opacity: 0.7;
} 
