最可靠做法是按lvha顺序（:link→:visited→:hover→:active）用四个伪类设色；:visited仅支持有限样式属性；:hover不持续至点击后，:active仅在按下瞬间生效，移动端无效，需js配合class实现点击后状态。

直接用 CSS 的 a:link、a:visited、a:hover、a:active 四个伪类分别设置颜色，是最可靠且符合标准的做法。别试图只改 a 或靠内联 style 蒙混过关——状态样式会失效或互相覆盖。

必须按 LVHA 顺序写规则，否则 hover 不生效

CSS 解析是自上而下覆盖的，如果 a:hover 写在 a:visited 前面，而用户已访问过该链接，浏览器就会优先匹配 a:visited 并忽略 a:hover。正确顺序只能是：

• a:link
• a:visited
• a:hover
• a:active

哪怕你只写其中两个，也要保持这个相对顺序。例如只设未访问和悬停色，就得写成：

a:link { color: #0066cc; }
a:hover { color: #e74c3c; }

visited 状态有严格限制，不能随便设颜色以外的属性

出于隐私保护，现代浏览器禁止对 a:visited 应用除 color、background-color、border-color（含各方向）、outline-color 和 column-rule-color 之外的任何样式。一旦你给 a:visited 加了 font-size 或 display: none，整条规则会被直接丢弃——连颜色都不生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

所以这类写法是无效的：

a:visited {
  color: #999;
  font-weight: bold; /* ❌ 浏览器会忽略整条规则 */
}

hover 和 active 的触发时机容易被误解

a:hover 在鼠标移入时立即生效，但不会持续到点击后；a:active 只在鼠标按下、尚未松开的瞬间起作用（通常不到 100ms），松开就退回到 :hover 或 :link/:visited 状态。

常见误操作：

• 把 a:active 当作“点击后保持高亮”来用 → 实际做不到，得靠 JS 切换 class
• 在移动端测试时发现 hover 失效 → 因为多数移动设备没有 hover 概念，a:hover 仅对有指针设备有意义
• 给 a:active 设了背景色但看不出效果 → 检查是否被父容器 overflow 隐藏，或是否因 transition 动画延迟导致闪退

真正要稳住点击后的视觉反馈，得配合 JS 监听 click 事件并加 class，比如 is-clicked，再用 .is-clicked 规则控制样式。纯 CSS 拿不到“已点击完成”这个状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！