浏览器默认将已访问链接设为紫色，可通过a:visited伪类自定义颜色，但仅限color、background-color等少数属性，且必须遵循LVHA顺序（:link→:visited→:hover→:active）以确保样式生效。

点击过的链接颜色变紫，是浏览器默认行为，由 a 标签的伪类状态控制。要自定义访问后的颜色，关键在于正确设置 :visited 伪类，并注意它的限制和使用顺序。

理解 a 标签的四种核心状态

超链接有四个常用伪类，代表不同交互阶段：

• :link —— 未访问的链接（必须是未被点击过、且 href 存在）
• :visited —— 已访问过的链接（用户曾点击并成功跳转过）
• :hover —— 鼠标悬停时
• :active —— 链接被鼠标按下（点击瞬间）时

:visited 的设置要点与限制

:visited 只能修改有限的 CSS 属性，这是浏览器出于隐私保护强制规定的。允许设置的样式包括：

• color（文字颜色）
• background-color（背景色）
• border-color（边框颜色）及部分 border-* 子属性
• outline-color
• color-adjust 和 column-rule-color

不能设置 font-size、display、margin、padding、transform 等影响布局或可被脚本探测的属性，否则会被忽略。

CSS 伪类书写顺序很重要（LVHA 规则）

为避免样式被覆盖，这四个伪类应严格按 Link → Visited → Hover → Active 的顺序声明：

a:link    { color: #007bff; }
a:visited { color: #6c757d; } /* 访问后显示灰字 */
a:hover   { color: #0056b3; }
a:active  { color: #004085; }

如果把 :hover 写在 :visited 前面，悬停时可能无法生效；顺序错乱会导致部分状态失效。

实际应用建议

日常开发中可这样优化链接体验：

• 给 :visited 设置一个比 :link 更低调的颜色（如深灰），既体现已读状态，又不突兀
• 配合 :hover 加一点过渡效果：transition: color 0.2s;
• 若想让“已访问”视觉更明显，可用 background-color 或 text-decoration: underline dashed;（但注意 :visited 中 text-decoration 是允许的）
• 不要依赖 :visited 做关键功能提示（比如“已完成任务”），因隐私策略下它不可靠，建议用 class 控制