超链接默认颜色不是黑色，因浏览器ua样式将未访问链接设为蓝色（#0000ee）、已访问设为紫色（#551a8b）；需用a:link、a:visited、a:hover、a:active按lvha顺序显式覆盖全部状态才能统一颜色。
超链接默认颜色为什么不是黑色
浏览器对 <a></a> 标签有内置样式：未访问时是蓝色（#0000ee），已访问是紫色（#551a8b），悬停/激活状态还可能变红或加下划线。这不是你代码写错了，是 UA stylesheet 在起作用。
直接在元素上写 style="color: black" 只能覆盖未访问态；想统一所有状态，必须显式重置全部伪类。
用 CSS 同时覆盖 :link :visited :hover :active
只改 :link 不够——用户点过一次，颜色就回紫色；没加 :hover，鼠标移上去又跳回蓝色。必须四者齐设，且顺序不能乱（LVHA 规则）。
-
:link和:visited必须在前，否则会被后声明覆盖 -
:hover和:active要放在后面，确保交互态优先 - 如果用 class 控制（如
.text-link），记得把 class 加到每个伪类前：.text-link:link
/* 推荐写法：全状态统一为深灰 */
a {
color: #333;
}
a:link { color: #333; }
a:visited { color: #333; }
a:hover { color: #111; }
a:active { color: #000; }
内联 style 写 color 为什么有时失效
内联样式优先级虽高，但遇到 !important 或更具体的选择器（比如 nav a:hover）就会被压住。另外，有些 CMS 或框架会注入全局样式，把 a 包在特定容器里，导致你的 style="color:red" 被更长的路径选择器覆盖。
- 检查开发者工具里
Computed面板，看最终生效的是哪条规则 - 避免依赖内联 style 改链接色，CSS 文件里集中控制更可靠
- 如果必须用内联，加上
!important（不推荐，但临时救急可用）：style="color: red !important"
深色模式下链接色发灰看不清
单纯设 color: #333 在深色背景下对比度不足。别硬调一个固定值，用系统感知的色值更稳妥。
- 用
color-scheme: light dark声明支持暗色模式 - 配合
prefers-color-scheme媒体查询动态切换：@media (prefers-color-scheme: dark) { a { color: #bbdaff; } } - 或者直接用语义化颜色关键词：
color: CanvasText（跟随系统文本色），但兼容性略低（IE 不支持）
最省事又靠谱的做法：设一个足够高的对比度基础色（如 #1a73e8），再配一套暗色模式下的对应亮色，别图省事只调一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
