超链接默认颜色不理想因对比度不足且脱离主题色体系；需用:link、:visited、:hover、:active四状态精准控制，并注意深色模式适配与第三方样式覆盖问题。
超链接默认颜色为什么不是浅色主题下的理想选择
浏览器对 a 元素的默认样式（如 Chrome 的 #0066cc 蓝色）在浅色背景上虽可读，但对比度常低于 WCAG 4.5:1 推荐值，尤其对弱视用户；更关键的是，它和你的主题色体系完全脱节，视觉上显得“没被接管”。
用 CSS 的 :link、:visited、:hover、:active 四状态精准控制
不能只改 a，必须显式声明全部四个伪类，否则部分状态会回退到浏览器默认色。尤其 :visited 在现代浏览器中受隐私限制，只能设颜色/文本装饰等有限属性，且不能读取计算值——所以必须手动指定。
-
a:link { color: #2563eb; }—— 未访问链接，建议用主品牌蓝 -
a:visited { color: #4f46e5; }—— 已访问链接，可用略深的紫蓝，保持可区分但不突兀 -
a:hover { color: #1d4ed8; text-decoration: underline; }—— 悬停时加深+加下划线，强化反馈 -
a:active { color: #1e40af; }—— 点击瞬间再深一级，体现按压感
注意：如果用了 text-decoration: none 去掉下划线，:hover 里务必加回来，否则用户无法感知可点击性。
避免被全局 CSS 重置或框架样式覆盖
像 Bootstrap 或 Tailwind 的基础样式表常带 a { color: inherit; } 或 a { color: #0d6efd; }，会直接覆盖你的设置。解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 把你的链接样式规则写在引入第三方 CSS 之后（顺序即优先级）
- 加
!important—— 不推荐，但当框架封装太深（如某些 CMS 主题）时，这是最快生效的兜底手段：a:link { color: #2563eb !important; } - 检查 DevTools 的 Computed 面板，确认最终生效的是哪条规则，而不是只看 Styles 面板里是否勾选
深色模式切换时链接色要不要自动变？
要，但别靠 JS 监听 prefers-color-scheme 手动切 class——太重。直接用媒体查询更轻量可靠：
@media (prefers-color-scheme: dark) {
a:link { color: #60a5fa; }
a:visited { color: #a78bfa; }
a:hover { color: #93c5fd; text-decoration: underline; }
}
实际项目中，浅色主题链接色容易选得过亮（比如纯白 #ffffff 在白底上消失），而深色模式下又容易选得太暗（比如 #374151 在灰黑底上对比不足）。最稳妥的做法是：浅色主题用饱和度中等的蓝/紫，深色主题用稍亮的同色系，别追求“反色”。
