只改 a:link 没变色是因为被更高优先级规则覆盖，如后续的 a、a:visited、父级 color 继承、内联样式或 css 框架样式；必须按 lvha 顺序写全 a:link、a:visited、a:hover 等伪类并确保其位置靠前。
直接用 a:link { color: #007bff; } 就行，但必须写对位置、顺序和选择器优先级，否则浏览器会忽略或覆盖。
为什么只改 a:link 还是没变色
常见错误不是语法错，而是被更高优先级规则压住了：
-
a或a:visited的样式写在a:link后面，且没加!important，导致它被覆盖 - 父容器（比如
nav或.content）设置了color，而a没显式声明，继承了父级颜色 - 用了内联
style="color: blue;"，它的优先级高于a:link，得删掉或覆盖 - 某些 CSS 框架（如 Bootstrap）自带
a样式，需检查开发者工具里「Computed」面板确认最终生效的是哪条规则
a:link 必须和 :visited :hover :active 一起写
单独写 a:link 看似可以，但实际容易出问题：
- 如果后续加了
a { color: gray; }，它会同时影响:link和:visited，破坏已访问状态的视觉区分 - 浏览器按 LVHA 顺序解析伪类：
:link→:visited→:hover→:active；漏掉中间某个，:hover可能被:visited拦截（尤其当两者颜色相同又没 hover 规则时） - 推荐最小可用组合：
a:link+a:visited+a:hover，哪怕:visited和:link颜色一样，也得显式写出
示例（放在 <style></style> 或外部 CSS 中）：
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
已访问链接颜色受限，a:link 是唯一完全可控的状态
现代浏览器（Chrome/Firefox/Safari）对 a:visited 施加了严格限制：你只能设 color、background-color、border-color 等少数属性，不能读取或动画化它。但 a:link 没这限制——你可以放心用 transition、text-decoration、甚至 font-weight 配合它。
- 想让未访问链接带下划线淡入？
a:link { text-decoration: none; transition: text-decoration 0.2s; } a:link:hover { text-decoration: underline; } - 想兼容深色模式？加媒体查询：
@media (prefers-color-scheme: dark) { a:link { color: #4dabf7; } } - 注意：别用过时的
<font color="red"></font>，HTML5 已废弃，且无法触发伪类
真正容易被忽略的是：即使你只关心未访问状态，也得把 a:link 放在整个链接状态链的最前面，并确保它没被其他更具体的规则（比如 .header a）意外覆盖。调试时打开 DevTools，点开链接元素，看「Styles」面板里哪条 color 被划掉了——那才是问题所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
