内联样式 style="color:..." 最快修改链接颜色，但仅影响默认状态；伪类需按 link→visited→hover→active 顺序书写，否则失效；多页统一改色应使用外部 CSS 文件并注意对比度与深色模式适配。
只改一个链接，用 style="color: ..." 最快
直接在 <a> 标签里加内联样式，比如 <a href="#" style="color: #007bff;">点我</a>，就能立刻看到颜色变化。它生效快、不用找 CSS 文件，适合临时调试或单页小修改。
常见错误现象：style="color: red" 没生效，大概率是漏了引号、用了中文冒号或分号，或者父级元素（比如 <div style="color: gray;">）设置了更高优先级的 color，把内联样式盖住了。
- 只影响默认状态（即未访问、未悬停），
:hover和:visited不会跟着变 - 颜色值支持英文名（
red）、十六进制（#007bff）、RGB（rgb(0, 123, 255)） - 别用已废弃的
<font>标签——HTML5 不认，且完全无法控制交互态
a:link、a:visited、a:hover 顺序写错就白写了
CSS 伪类有隐含的层叠逻辑，浏览器按声明顺序匹配。如果把 a:visited 写在 a:hover 后面，鼠标悬停时可能还是显示已访问色——因为 :visited 规则覆盖了 :hover 的 color。
必须按这个顺序写：
立即学习“前端免费学习笔记（深入）”；
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #004080; }
-
a:link只匹配未访问链接；单独写a会同时影响:link和:visited，容易抹掉已访问标识 -
:visited在现代浏览器中受安全限制：只能改color、background-color等少数属性，font-size或transition会被忽略 -
:hover失效？先检查有没有父容器设了pointer-events: none，或者链接被透明<div>盖住了
多个页面要统一改色，必须抽到外部 .css 文件
硬编码每个 HTML 文件里的 <style> 或一堆 style="..."，改一处漏十处。正确做法是建一个 styles.css，写好规则，再用 <link rel="stylesheet" href="styles.css"> 引入。
最小可行配置示例（复制就能用）：
a:link { color: #007bff; text-decoration: none; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #004080; }
- 加
text-decoration: none是为了去掉下划线（可选），但记得给:hover补上，否则用户可能看不出这是可点击链接 - 如果只想改某块区域（比如导航栏）里的链接，用类选择器更安全：
.nav a { color: white; }，避免污染全局 - 外部 CSS 还能利用浏览器缓存，加载更快；而内联样式每次都要随 HTML 重新下载
颜色对比度不够，不是“不好看”，是“看不见”
很多开发者调完色就上线，结果用户反馈“链接找不到”。问题常出在对比度不足——比如浅灰文字配白色背景，或紫色链接配深蓝背景。
WCAG 推荐最低对比度为 4.5:1（普通文本）。可以用在线工具如 WebAIM Contrast Checker 输入你的 color 和背景色快速验证。
-
a:visited和a:link颜色太接近，用户无法分辨哪些点过、哪些没点过 - 深色模式下，硬编码的
#000000可能变成黑底黑字，直接消失 - 别依赖纯色名（如
lightgray），不同浏览器渲染差异大；优先用十六进制或 HSL，并测试明暗模式表现
