浏览器默认将已访问链接设为紫色，可通过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 控制
