必须按LVHA顺序（:link→:visited→:hover→:active）显式设置a标签各状态颜色，否则浏览器默认样式或高优先级伪类会覆盖基础设置，导致已访问链接变紫、悬停无效等问题。
直接用 a 选择器配 color 属性就能改超链接字体颜色，但只设一个颜色会覆盖所有状态，容易导致已访问链接看不出来、悬停没反馈——得按状态分开写才可靠。
为什么单写 a { color: red; } 不够用
浏览器对 a 标签默认区分四种状态：未访问（:link）、已访问（:visited）、悬停（:hover）、点击瞬间（:active）。如果只写 a { color: red; }，它只作用于未设置伪类的普通状态，而 :visited 等有更高优先级的规则会把它盖掉。结果就是：你设了红色，但已访问链接还是紫色，悬停也不变色。
常见错误现象：
- 改完颜色，刷新页面发现链接还是蓝的或紫的
- 鼠标移上去没反应，
:hover完全不生效 - 点开再返回，链接颜色“消失”或回退成默认色
a:link、a:visited、a:hover、a:active 必须按顺序写
这四个伪类不是随便排列的，CSS 解析时遵循“后声明覆盖前声明”的规则，而 :visited 和 :hover 存在交集（比如一个已访问链接被悬停），必须保证 :hover 写在 :visited 后面才能生效。标准顺序是 LVHA：:link → :visited → :hover → :active。
正确写法示例（放在 或外部 CSS 中）：
a:link { color: #0066cc; }
a:visited { color: #663399; }
a:hover { color: #ff3300; }
a:active { color: #009933; }
要点：
- 不要跳过某个状态（比如只写
:link和:hover），否则其他状态会回退到浏览器默认 - 如果想让已访问和未访问看起来一样，也得显式写
a:visited { color: ...; }，不能省略 -
:active持续时间极短（仅鼠标按下到松开之间），别指望靠它做主要视觉提示
内联 style 改不了 :hover 这类状态
你在 里写的 style，只影响元素的初始渲染状态，无法触发伪类。也就是说：style 只能等价于 a:link 的效果，对悬停、点击、已访问完全无效。
所以这些写法都无效：
真正该做的：把样式统一收口到 或外部 CSS 文件里，哪怕只是临时调试，也比堆 style 属性干净。
颜色值选错会导致可访问性问题
改颜色不是换个好看值就行。比如把链接设成 #cccccc（浅灰）配白色背景，对比度只有 1.5:1，远低于 WCAG 要求的 4.5:1，视障用户根本分不清哪是链接哪是普通文字。
实操建议：
- 用浏览器开发者工具的“可访问性”面板检查对比度（Chrome DevTools → Elements → 右侧 Accessibility 标签）
- 避免对
:link和:visited用相近色（如都用深蓝），否则用户无法判断是否点过 - 禁用下划线时（
text-decoration: none;），务必用足够差异化的颜色+悬停变化来补偿交互提示
最常被忽略的一点：很多人调完 color 就以为完事了，其实 text-decoration、outline（聚焦时）、甚至 cursor: pointer 都得同步考虑——链接不是只有颜色这一个维度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
