必须按lvha顺序（:link→:visited→:hover→:active）声明伪类，否则同权重下后声明者覆盖前声明者，导致已访问链接悬停失效或状态样式错乱。
直接改 a 标签的 color 就能生效，但只改默认状态；要让悬停、已访问等状态也按需变色，必须用伪类，且顺序不能错。
为什么单写 style="color:red" 有时没用
浏览器对 a 标签有内置样式：未访问是蓝色，已访问是紫色，悬停可能带下划线。内联 style="color:red" 只覆盖 a:link 的正常态，a:visited 和 a:hover 仍走浏览器默认或更高优先级的 CSS 规则。
- 仅靠内联样式无法控制
:hover、:visited等状态 - 如果页面已有外部或内部样式表定义了
a:visited { color: #555 }，它会覆盖内联的color - 测试时建议先禁用所有外部 CSS，再单独验证内联效果
a:link、a:visited、a:hover、a:active 必须按顺序写
伪类顺序不是可选建议，而是 CSS 层叠规则决定的——后写的规则会覆盖前面同优先级的规则。如果把 a:hover 写在 a:link 前面，悬停时可能不触发（因为 a:link 覆盖了它）。
- 正确顺序：
a:link→a:visited→a:hover→a:active - 错误示例：
a:hover { color: red; } a:link { color: blue; }这样悬停不会变红 - 实际项目中常漏掉
a:visited，导致用户点过链接后颜色突变，体验断裂
用 class 精确控制某几组链接的颜色
全站统一改 a 容易误伤导航、页脚等区域。更稳妥的做法是加 class，只作用于目标链接。
- HTML 中：
@#@#@#@#@#@#@#@#@#@0 - CSS 中：
.nav-link { color: #007bff; } .nav-link:hover { color: #0056b3; } .nav-link:visited { color: #6f42c1; } - 避免用
!important强行覆盖——说明选择器优先级设计不合理，应改用更具体的 class 或嵌套
颜色对比度不足会导致可访问性问题
比如浅灰文字配白色背景、淡紫文字配浅蓝背景，屏幕反光或视力障碍用户根本看不清。这不是“不好看”的问题，而是 WCAG 2.1 AA 级合规要求。
- 检查工具推荐：Chrome DevTools 的 Lighthouse → “Accessibility” 报告
- 最小对比度要求：正文文本 ≥ 4.5:1（如
#333在白底上是 11.5:1，安全；#999是 2.8:1，不达标） - 别只测默认态——
a:visited颜色也得满足对比度，尤其深色主题下容易忽略
真正难的不是写对那几行 CSS，而是想清楚：哪些链接需要区分状态？哪些用户会反复点击？哪些颜色组合在暗色模式下依然可用？这些细节一旦上线就很难回退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
