覆盖超链接默认颜色需同时设置a、a:visited、a:hover、a:active四种状态，否则颜色跳变；a:visited受安全限制仅支持有限样式；深色模式下应配合prefers-color-scheme媒体查询调整颜色与焦点轮廓。
超链接默认颜色怎么覆盖
浏览器对 <a></a> 标签有内置样式：未访问是蓝色（#0000ee），已访问是紫色（#551a8b），悬停/激活状态还有不同。直接写 color: red 往往只改了部分状态，看起来“没生效”。
- 必须同时覆盖四种伪类：
a、a:visited、a:hover、a:active，否则颜色会跳变 -
a:visited受浏览器安全限制，只能设置有限样式（color、background-color等），不能读取font-size或触发 JS - 如果用了 CSS 重置库（如 Normalize.css），它可能已重设了
a的color，要检查层叠顺序
CSS 里改链接颜色的最小可靠写法
别只写一条 color，用这个结构保底：
/* 先统一基础色 */
a {
color: #333;
text-decoration: none;
}
/* 再单独强化交互态 */
a:visited { color: #333; }
a:hover { color: #007bff; }
a:active { color: #0056b3; }注意：a:visited 必须显式声明，且值要和 a 一致，否则已访问链接会退回浏览器默认紫。
内联样式为什么经常失效
内联样式（style="color:red"）会被 :hover 等伪类规则覆盖——因为伪类选择器权重高于内联样式的单个属性。
立即学习“前端免费学习笔记（深入）”；
- 内联样式只作用于
a默认态，:hover一触发就按外部 CSS 走 - 想纯用内联？得写成
<a onmouseover="this.style.color='#007bff'" ...></a>，但不推荐：破坏可维护性，且无法响应键盘焦点（:focus） - 更糟的是，有些框架（如 Vue 的 scoped style）会加属性选择器，进一步提高外部规则权重
深色模式下链接看不清怎么办
硬写死 color: #333 在深色背景上就是糊的。别靠猜，用系统级响应：
@media (prefers-color-scheme: dark) {
a { color: #66b3ff; }
a:visited { color: #66b3ff; }
a:hover { color: #99ccff; }
}关键点：深色模式下，人眼对蓝绿色系敏感度更高；#66b3ff 比纯白更柔和，也比浅灰更有点击暗示。别忘了同步检查 text-decoration-color 和下划线对比度。
最常被忽略的是：链接焦点轮廓（outline）在深色模式下可能完全不可见，要额外加 a:focus { outline-color: #007bff; }。
