一、问题背景与原理
1.1 访问后颜色的核心问题
在日常前端开发中，链接在点击后颜色未如预期，常常让设计师和开发者苦恼。此时需要理解 伪类 :visited 的作用，以及它如何将已访问的链接与未访问的链接区分开来，以实现连贯的视觉反馈。
场景要点：用户查看页面时，已访问的链接应呈现与未访问链接不同的颜色以指示历史状态，这有助于提升用户体验与导航效率。对于新手来说，理解 :visited 的作用是解决颜色错位的第一步。
正是因为这个需求，许多开发者会想到直接给 a:visited 设置颜色，从而实现已访问链接的“二次着色”。
1.2 :visited 的安全性与原理
浏览器为保护用户隐私，对 :visited 可修改的样式属性做了限制，只允许颜色相关的属性被修改，其他属性如字体、大小等则不能通过该伪类来改变。这一设计避免了历史记录信息被跨域或通过样式泄露。
核心原理：浏览器计算样式时仅暴露 color、background-color、border-color、outline-color 等少数属性的颜色信息，其他属性的变化会被忽略，以防止通过视觉差异推断用户的访问历史。
/* 仅演示：已访问链接的颜色设定不可影响其他属性 */
a:link { color: #1a73e8; }
a:visited { color: #e91e63; }
a:hover { color: #0b57d0; text-decoration: underline; }/* 说明：除了颜色相关属性，其他样式无法通过 :visited 伪类修改 */
二、核心要点：如何使用 :visited 单独设置已访问链接颜色
2.1 选择器层级与优先级
要确保已访问颜色正确生效，关键在于正确编写选择器并理解优先级。链接的四状态伪类（:link、:visited、:hover、:focus）应成对使用，避免冲突。
优先级要素：a:visited 的样式会覆盖 a:link 的默认状态，但若存在更高权重的选择器（如类选择器、ID 选择器等），需要调整权重以确保已访问状态生效。
2.2 实践代码示例
下面给出一个简洁且常用的实现范例，展示如何在相同区域内区分未访问和已访问链接的颜色，以及悬停态的视觉反馈。
/* 基本链接颜色及状态区分 */
a:link { color: #1a73e8; text-decoration: none; } /* 未访问 */
a:visited { color: #e91e63; text-decoration: none; } /* 已访问 */
a:hover { color: #0b57d0; text-decoration: underline; } /* 悬停 */
a:focus { outline: 2px solid #5b9dd9; outline-offset: 2px; }
/* 全局 to-avoid 额外样式干扰 */
a { color: inherit; text-decoration: none; }
快速要点：确保同一组链接在 未访问 与 已访问 状态之间有明确的颜色对比，这样可以在不破坏隐私的前提下提供清晰的导航指示。
三、兼容性与实践注意事项
3.1 无障碍与对比度
在设计里，除了确保颜色差异清晰，还要考虑 对比度和无障碍性，特别是在深色背景或启用高对比度模式时。
一个好的实践是：为未访问和已访问的链接选用两组具有足够对比度的颜色，并确保文字可读性在所有设备上都保持一致。
3.2 浏览器行为的差异
主流浏览器对 :visited 的支持总体一致，但具体实现上会有微小差异，尤其是在渲染引擎升级或隐私策略调整时。最常见的问题来自于选择器权重和样式加载顺序。
如果遇到颜色仍旧不正确的情况，优先检查 样式的加载顺序与权重，确保没有被其他规则覆盖，同时避免使用非必要的全局覆盖规则。
场景回顾：当你需要解决 CSS链接访问后颜色不对怎么办？教你用:visited伪类单独设置已访问链接颜色 时，最直接的做法是为 a:visited 指定与 a:link 区分明显的颜色，同时遵循隐私约束只修改颜色属性。
