css 如何设置链接不同状态的颜色_link visited hover active 伪类

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;}