必须按lvha顺序（a:link→a:visited→a:hover→a:active）声明，否则后置伪类会覆盖前置伪类导致:hover/:visited失效；且:visited仅支持color等有限颜色属性，https下才可靠。
直接改 <style></style> 块里的 a:link、a:visited、a:hover 规则，比动每个 <a></a> 标签快得多，也更可靠。
为什么不能只靠 style="color: ..." 改单个链接
内联样式 style="color: red;" 只影响链接的默认未访问状态，对 :hover、:visited 完全无效。用户点过一次后颜色就变回浏览器默认（通常是紫色），悬停也不变色——这不是 bug，是 CSS 机制决定的。常见错误包括：漏引号、用中文冒号、父级设置了 color 且带 !important，导致内联样式被覆盖。
- 仅适用于临时调试或极简单页中“改一个算一个”的场景
- 无法响应用户交互行为（如已访问、悬停）
- 多个链接时维护成本高，易漏改、难统一
a:link、a:visited、a:hover 必须按顺序写
CSS 层叠规则决定了伪类的生效优先级。如果把 a:hover 写在 a:visited 前面，而后者又没声明 color，那么悬停时可能沿用已访问色，导致 hover 失效。这就是常说的 LVHA 顺序（LoVe HAte）：
-
a:link—— 未访问链接 -
a:visited—— 已访问链接 -
a:hover—— 鼠标悬停时 -
a:active—— 按下瞬间（可选）
示例正确写法：
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #004085; }
外部 CSS 文件里定义链接样式最稳妥
模板通常复用于首页、列表页、详情页等多个 HTML 文件。如果每页都塞一段 <style></style>，改品牌色时要翻 10 个文件，极易漏掉。抽成 styles.css 并用 <link rel="stylesheet" href="styles.css"> 引入，才是工程化做法。
- 所有页面自动同步更新，无需重复粘贴
- 支持缓存，减少 HTTP 请求体积
- 避免因复制遗漏导致某页链接色不一致
- 若模板含 iframe 或第三方组件，外部 CSS 更容易穿透作用域
:visited 的颜色限制你可能不知道
现代浏览器（Chrome/Firefox/Safari）出于隐私保护，严格限制 :visited 可设置的 CSS 属性。你只能安全使用：color、background-color、border-color、outline-color，以及部分 text- 和 column- 属性。以下写法会静默失效：
-
a:visited { font-size: 14px; }—— 字体大小不变 -
a:visited { transition: color 0.2s; }—— 过渡动画不触发 -
a:visited { display: inline-block; }—— 布局完全不受影响
所以别试图用 :visited 做复杂动效或布局调整，它只适合做基础色区分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
