必须按lvha顺序（:link→:visited→:hover→:active）书写，否则因同权重下后声明覆盖前声明，导致已访问链接悬停失效或点击状态不可见；:visited还受浏览器隐私限制，仅支持少数样式属性。
a { color: … } 能改全页链接颜色，但只覆盖默认状态；真正要管住 :link、:visited、:hover、:active 四种状态，必须分开写、按顺序写，否则鼠标一悬停就回退成浏览器默认蓝紫色。
为什么直接写 a { color: #28a745; } 不够用
它只影响链接的“基础渲染态”，也就是既没被访问过、也没悬停、更没点击时的样子。一旦用户点过一次，:visited 会接管并显示紫色（Chrome/Firefox 默认）；鼠标移上去，:hover 又会切到蓝色——你写的那条规则根本没生效。
- 浏览器对
a标签有内置样式表，:visited和:hover的优先级天然高于a - 不显式声明
a:visited，用户点过的链接永远是紫色，品牌色完全失控 - 写了
a:hover却没生效？大概率是a:visited规则写在了它后面，导致层叠时被覆盖
必须按 LVHA 顺序写四条规则
LVHA 是 :link → :visited → :hover → :active 的首字母缩写，这是 CSS 伪类的官方推荐书写顺序，不是建议，是避免冲突的硬要求。
-
a:link { color: #007bff; }—— 未访问链接，别漏掉:link，光写a不等于它 -
a:visited { color: #6c757d; }—— 已访问链接，颜色不能太接近未访问态，否则失去视觉反馈 -
a:hover { color: #0056b3; }—— 悬停态，通常比:link深 20% 左右，增强可感知性 -
a:active { color: #004085; }—— 点击瞬间，再深一点，形成按下反馈
顺序错乱的典型后果：a:visited { color: red; } 写在 a:hover 后面，鼠标悬停已访问链接时，颜色还是红色——因为 :visited 规则覆盖了 :hover。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
放在
单页临时调试，把四条规则塞进 <style></style> 块没问题；但只要页面不止一个，就必须抽到外部 CSS 文件，否则改个主色调得手动打开七八个 HTML 文件挨个替换。
- 外部文件（如
styles.css）里写规则，HTML 中用<link rel="stylesheet" href="styles.css">引入 - 别用
@import，它会阻塞渲染，尤其在旧版 IE 里容易引发 FOUC（Flash of Unstyled Content） - 如果用了构建工具（Vite/Webpack），CSS 文件路径要和入口 HTML 的相对位置匹配，否则 404 导致所有链接变回默认色
已访问链接（:visited）的兼容性限制
现代浏览器出于隐私考虑，对 :visited 能设置的样式做了严格限制：只允许 color、background-color、border-color、outline-color 和少数几个文本相关属性。其他任何改动都会被忽略。
-
a:visited { font-weight: bold; }—— 无效，浏览器直接丢弃 -
a:visited { transform: scale(1.1); }—— 无效，连动画都不触发 -
a:visited { color: #6c757d; }—— 有效，这是最安全、最可控的用法
这点特别容易被忽略：你明明写了 hover 动画，却只在未访问链接上动，点过之后就僵住——不是代码错了，是浏览器故意不让 :visited 动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
