最常见原因是浏览器默认样式或更高优先级规则覆盖了声明；需用开发者工具检查计算样式，显式设置a:link、a:visited等伪类，注意LVHA顺序、:visited属性限制及深色模式适配。
为什么写了 a { color: red; } 却没变色
最常见原因是浏览器默认样式或更高优先级规则覆盖了你的声明。打开开发者工具（F12），检查目标 <a> 元素的 color 属性——如果它被划掉，说明有别的规则赢了。典型干扰源包括：
• 父元素设置了 color，且未在 a 上重置
• 引入了 Bootstrap、Tailwind 等 CSS 框架，它们自带更具体的链接选择器（如 .nav-link 或 a:hover）
• 使用了 !important 的第三方样式（比如广告脚本注入的内联样式）
• 样式写在 <head> 里，但 HTML 内容提前加载并渲染完成
为什么只改了 a，悬停/已访问后还是蓝紫色
因为 a 本身只控制“无状态”下的表现，而 :link、:visited、:hover、:active 是独立伪类，浏览器会按自己的默认规则分别应用。你写了 a { color: red; }，但没动 a:visited，它仍走浏览器内置的紫色逻辑。
• 必须显式写出所有要控制的状态，例如：a:link, a:visited, a:hover, a:active { color: #007bff; }
• 如果想保留语义区分，至少得写全 a:link 和 a:visited，否则已访问链接永远不听你指挥
• 注意顺序：:link → :visited → :hover → :active（LVHA），否则 :visited 可能拦截 :hover
为什么 a:hover 或 a:visited 颜色不生效
这两类伪类有特殊限制，不是写错语法，而是被浏览器主动压制：
• :visited 只允许修改极有限的属性：color、background-color、border-color、outline-color，其他如 font-size、display、transition 一律忽略（隐私保护机制）
• :hover 失效常因父容器设了 pointer-events: none，或链接被透明 <div> 盖住，鼠标根本没真正悬停到它身上
• 不要用 !important 强制 :visited 的颜色——现代浏览器会直接无视，这不是 bug，是故意设计
为什么深色模式下链接看不见了
改完颜色就上线，结果用户开深色系统发现浅蓝文字贴在深灰背景上，对比度低于 4.5:1，文字发虚甚至隐形。这不是样式失效，是可访问性硬伤：
• 别只写死一个十六进制值，比如 #007bff 在深色背景下就是灾难
• 推荐用 color-scheme: light dark; 配合 @media (prefers-color-scheme: dark) 分别定义
• 或直接用相对颜色函数：color: oklch(65% 0.2 240);（需检查兼容性），比硬编码更鲁棒
• 测试时务必手动切换系统深色模式，别只靠模拟器
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是怎么写那行color，而是没意识到浏览器对链接状态的分治逻辑、隐私限制和系统级适配要求。写完记得查开发者工具里的计算样式，而不是盯着自己写的 CSS 干猜。 
