必须显式覆盖a:link、a:visited、a:hover、a:active四个伪类并按lvha顺序书写，否则颜色会跳变或回退默认；:visited仅支持有限属性且需与:link成对设置，移动端还需考虑:focus。
链接默认颜色为什么改不了
直接写 color 在 <a></a> 标签上没用，是因为浏览器内置了 :link、:visited 等伪类样式，它们的优先级更高。必须显式覆盖这四个伪类，否则只改其中一两个，切换状态时颜色会“跳变”或回退到默认蓝/紫。
:link 和 :visited 必须成对设置
:link 控制未访问链接，:visited 控制已访问链接。两者必须同时定义，否则 :visited 会沿用浏览器默认（通常是深紫色），且现代浏览器出于隐私限制，:visited 只允许设置有限的 CSS 属性（color、background-color、border-color 等，不能读取尺寸或动画）。
- 不要只写
a:link { color: #333; }而忽略:visited - 避免在
:visited中使用opacity或transform—— 浏览器会静默忽略 - 若想统一未访问/已访问颜色，可写成：
a:link, a:visited { color: #2c3e50; }
:hover 和 :active 的顺序不能错
CSS 伪类有特定层叠顺序：:link → :visited → :hover → :active。如果把 :hover 写在 :link 前面，悬停时可能不生效；:active（点击瞬间）必须放在最后，否则会被前面的 :hover 覆盖。
- 推荐书写顺序（LVHA）：
:link→:visited→:hover→:active -
:active持续时间极短，别依赖它做复杂动效；测试时建议用鼠标左键按住不放观察 - 移动端需额外考虑
:focus，尤其表单内链接，否则键盘导航用户看不到焦点态
内联样式和 !important 的坑
用 style="color: red" 给 <a></a> 加内联色，只能影响默认态，:hover 仍会触发——因为伪类规则优先级高于普通属性。强行加 !important 虽能压住，但会让后续维护变脆弱。
- 更稳妥的做法是统一用 class 控制，比如：
.nav-link:link, .nav-link:visited { color: #1a73e8; }<br>.nav-link:hover { color: #0d47a1; }<br>.nav-link:active { color: #0d47a1; } - 避免在多个地方重复定义同一组伪类，提取为通用 class 更易维护
- 注意：Chrome 120+ 对
:visited的限制进一步收紧，连transition都可能被禁用，别假设它能平滑过渡
:visited 的显式声明，以及 LVHA 顺序错乱导致悬停失效——这两处一出问题，调试时往往要花十分钟才意识到不是选择器写错了，而是顺序或覆盖逻辑没理清。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
