链接访问状态颜色通过 :link 和 :visited 伪类区分，:visited 仅支持 color、background-color 等颜色相关属性，须按 LVHA 顺序书写，且受隐私限制影响兼容性与功能。
链接的访问状态颜色可以通过 :link 和 :visited 伪类来区分。前者控制未访问链接的颜色，后者控制已访问链接的颜色。注意：出于隐私保护限制，:visited 可设置的样式非常有限，仅支持颜色相关属性（如 color、background-color、border-color 等），且不能读取或影响布局、尺寸或其它敏感样式。
基础语法与顺序要求
必须按正确顺序书写伪类，否则 :visited 可能不生效：
-
a:link—— 未访问的链接 -
a:visited—— 已访问的链接 -
a:hover—— 鼠标悬停时（可选） -
a:active—— 正在点击时（可选）
推荐写法（LVHA顺序）：
a:link { color: #0066cc; }
a:visited { color: #666666; }
a:hover { color: #ff6600; }
a:active { color: #cc0000; }
实际应用中的常见问题
浏览器对 :visited 的限制较严格，以下操作可能无效或被忽略：
立即学习“前端免费学习笔记（深入）”；
- 修改
font-size、display、visibility等非颜色属性 - 使用
transition或animation改变已访问链接的动画效果 - 通过 JavaScript 获取
:visited元素的真实颜色（现代浏览器会返回默认值）
因此，建议只用 color、text-decoration、border-color 等安全属性做视觉区分。
增强可读性的实用技巧
为了让用户更清晰识别访问状态，可以结合其他视觉线索：
- 给已访问链接加下划线：
a:visited { text-decoration: underline; } - 微调灰度对比：
a:link { color: #1a73e8; } a:visited { color: #5f6368; } - 配合图标（需用伪元素 + 安全属性）：
a:visited::after { content: "✓"; margin-left: 4px; color: #5f6368; }（注意：部分浏览器可能限制::after在:visited中的表现）
兼容性与注意事项
所有现代浏览器均支持 :link 和 :visited，但要注意：
- HTTPS 页面中，跨域链接是否“已访问”取决于当前域名的浏览历史，不受外部网站影响
- 隐私模式下，
:visited样式通常不生效（因无历史记录） - 避免依赖
:visited实现关键功能（如导航状态提示），应辅以其他方式（如服务器端标记、JS 记录等）
