CSS链接颜色设置：link与visited伪类使用技巧

本文深入解析了CSS中链接伪类`:link`与`:visited`的正确使用规范，强调必须严格遵循LVHA（:link→:visited→:hover→:active）声明顺序，否则`:visited`样式可能被忽略；同时揭示了现代浏览器出于隐私保护对`:visited`施加的关键限制——仅允许设置极少数颜色相关属性（如`color`、`background-color`、`border-color`等），而`font-size`、`display`、`background-image`等常用样式会被静默忽略，且无法通过`!important`绕过；更需注意的是，JavaScript完全无法读取或修改`:visited`状态，其表现还受缓存、无痕模式及跨域策略影响。掌握这些“看不见却致命”的规则，才能真正写出可靠、安全、符合预期的链接样式。

link 和 visited 伪类的声明顺序不能乱

浏览器对 a:link 和 a:visited 的匹配有严格顺序：必须先写 :link，再写 :visited，否则 :visited 可能被忽略。这是因为 CSS 优先级规则中，后声明的样式会覆盖同权重的前声明——但 :visited 本身受安全限制，只能设置有限样式（颜色、背景色、边框色等），且一旦顺序错，连这些都被压制。

• 正确顺序：a:link { color: blue; } → a:visited { color: purple; }
• 错误写法：a:visited 写在 :link 前面，多数浏览器直接不生效
• 别用 !important 强行覆盖，它无法绕过安全策略，反而让调试更难

visited 样式能改的属性非常有限

出于隐私保护，现代浏览器禁止通过 :visited 读取或影响布局相关属性。你只能安全地设置：color、background-color、border-color（及各方向变体）、outline-color，还有少数几个 text- 开头的属性（如 text-decoration-color）。其他一概无效，比如 display、font-size、padding、visibility 都会被静默忽略。

• 常见踩坑：a:visited { font-weight: bold; } —— 完全没反应，控制台也不报错
• 想靠 :visited 改图标？不行。用 background-image 也不行（已被禁用）
• 颜色值支持所有合法格式：#663399、rgb(102,51,153)、rebeccapurple 都可以

hover 和 active 必须放在 link/visited 之后

要让鼠标悬停和点击时的颜色正常切换，:hover 和 :active 必须排在 :link 和 :visited 后面，否则它们可能被覆盖。完整推荐顺序是：:link → :visited → :hover → :active（LVHA 规则）。

• 典型问题：a:hover 写在 a:link 前面，结果悬停时颜色不变
• :active 是点击瞬间的状态，不是“已点击”，所以它不影响访问历史判断
• 如果用了 :focus（例如键盘导航），建议放在 :active 后面，形成 LVHFA

visited 状态不会实时更新，缓存和隐私策略会影响表现

页面加载后，:visited 状态由浏览器根据本地历史记录决定，不会因 JS 修改 location 或点击跳转而立刻刷新当前页的链接样式。而且，隐私模式下、或启用了“阻止网站跟踪”选项时，:visited 可能完全不触发，或者只对同源链接生效。

• 测试时别只看一个标签页：新开无痕窗口，手动访问目标链接后再回来，才能看到效果
• 用 document.querySelector('a').visited？不存在这个属性，JS 无法读取 :visited 状态（这是刻意设计的安全限制）
• 某些浏览器（如 Firefox）对跨域链接的 :visited 更保守，甚至默认禁用

实际应用中，最常被忽略的是 LVHA 顺序和 visited 的属性限制——不是写错了，而是根本没意识到它被浏览器悄悄屏蔽了。

今天关于《CSS链接颜色设置：link与visited伪类使用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！