应按LVHA顺序使用:hover和:visited伪类，仅用color等安全属性区分状态，:visited:hover可微调已访问链接悬停效果，禁用transform、box-shadow等非安全属性。
给链接添加访问提示，核心是合理组合 :hover 和 :visited 伪类，并注意浏览器的安全限制——:visited 只能修改有限的 CSS 属性（如 color、background-color、border-color 等），不能读取或影响布局、尺寸或触发动画。
基础访问状态区分
最常用的方式是用颜色区分“未访问”、“已访问”和“悬停”状态。注意声明顺序很重要：:link → :visited → :hover → :active（LVHA 顺序），否则 :visited 可能被覆盖。
示例：
a:link { color: #007bff; text-decoration: none; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; text-decoration: underline; }
a:active { color: #004085; }
增强视觉提示（图标/下划线）
可在悬停时添加图标或动态下划线，但需确保已访问链接仍有可辨识变化。由于 :visited 无法使用 ::after 伪元素内容（多数浏览器禁用），推荐用纯 CSS 属性控制：
立即学习“前端免费学习笔记（深入）”；
- 用
border-bottom实现悬停下划线，已访问链接可设不同颜色或粗细 - 避免在
:visited中使用transform或opacity（部分属性受限） - 若需图标，建议用背景图或 SVG 内联，且只在
:hover中显示（:visited:hover是允许的）
兼容性与安全边界提醒
现代浏览器为防止历史嗅探攻击，大幅限制了 :visited 的样式能力：
- 不能通过 JavaScript 查询
:visited样式（如getComputedStyle返回默认值） - 不能在
:visited中设置outline、box-shadow、transition等非安全属性 -
:visited:hover是合法组合，可用于微调已访问链接的悬停效果
实用小技巧：渐变悬停 + 访问灰度
兼顾美观与可用性的一种写法：
a {
color: #2563eb;
transition: color 0.2s;
}
a:visited { color: #64748b; }
a:hover { color: #1d4ed8; }
a:visited:hover { color: #475569; }
这样既保持语义清晰，又提供平滑反馈，且完全符合浏览器安全策略。
