直接改 <a> 的 color 不生效，是因为浏览器默认伪类样式覆盖，必须按 LVHA 顺序（:link→:visited→:hover→:active）显式声明，且 :visited 需单独设置变量或颜色，不可省略。
直接改 <a> 的 color 不生效？先看伪类顺序
浏览器对 <a> 标签默认应用了多套伪类样式（:link、:visited、:hover、:active），如果只写 a { color: red; }，它会被更具体的伪类规则覆盖。常见现象是：鼠标悬停变色正常，但默认状态还是蓝色。
必须按 LVHA 顺序声明（:link → :visited → :hover → :active），否则 :visited 可能压住 :hover，或 :link 被忽略：
/* 正确顺序 */
a:link { color: #2c5f2d; }
a:visited { color: #6b4423; }
a:hover { color: #e74c3c; }
a:active { color: #9b59b6; }- 现代浏览器允许
:visited只设置有限样式（仅color、background-color、border-color等少数属性），且不能读取其计算值，这是隐私保护机制 - 若用 CSS-in-JS 或框架（如 React 的
styled-components），注意插入顺序——后定义的规则优先级更高，可能意外覆盖前面的:hover - 不要依赖
!important治标；优先检查选择器特异性，比如.nav a比a优先级高，会自然覆盖基础声明
内联样式和 style 属性改颜色，为什么有时无效？
内联样式（style="color: red;"）理论上优先级最高，但仍有失效场景：
-
<a href="#" style="color: red;">链接</a>在某些 CMS 或富文本编辑器中，被 JS 动态注入的 class（如.external-link）带!important规则，会覆盖内联样式 - 使用
currentColor的父容器（如<p style="color: blue;"><a>文字</a></p>）会让<a>继承该色，此时即使设了style="color: red"，也可能因继承链干扰而表现异常（尤其在未重置color的情况下） - 部分旧版 Outlook 客户端强制重置
<a>颜色为蓝色/紫色，内联样式完全不生效——邮件 HTML 必须用<font color="...">或行内style+!important并配合text-decoration: none才稳定
用 CSS 变量统一管理超链接颜色，怎么避免漏掉 :visited？
CSS 变量本身不触发伪类逻辑，:visited 必须显式引用变量，否则仍走浏览器默认色（通常是紫色）：
立即学习“前端免费学习笔记（深入）”；
:root {
--link-color: #1a6d9c;
--visited-color: #5a3e6d;
--hover-color: #d32f2f;
}
<p>a:link { color: var(--link-color); }
a:visited { color: var(--visited-color); } /<em> 这行不能省 </em>/
a:hover { color: var(--hover-color); }- 别试图用
a { color: var(--link-color); }一劳永逸——它只作用于未访问状态，:visited是独立伪类，不继承普通a的 color - 若项目要求所有链接（含已访问）统一色，仍需分别写
a:link和a:visited，并赋相同变量值；CSS 没有“全局链接色”这种快捷语法 - 变量名建议带语义，比如
--primary-link-color而非--color-1，方便后续排查哪个组件用了哪个变量
移动端点击后残留灰影或变色，和 color 有关吗？
无关。color 控制字体色，而点击后出现的半透明灰底（iOS Safari）、深色 overlay（Android Chrome）是系统级 :active 状态反馈，由 -webkit-tap-highlight-color 控制：
a {
-webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
/* color 相关样式照常写，互不影响 */
}- 这个属性只在移动 Web 中生效，桌面端忽略；不写不会影响
color表现，但影响用户体验 - 若同时设置了
a:active { color: ... }，它只在手指按住瞬间生效，松开即恢复，和 tap highlight 是两套机制 - 部分 UI 库（如 Bootstrap）已默认重置
-webkit-tap-highlight-color，检查是否被覆盖即可
实际改色时最易忽略的是 :visited 的显式声明和 LVHA 顺序——哪怕只想要一种颜色，也得为它单独写一行 a:visited，不然用户点过一次就变紫，自己都未必注意到。
