a:visited 仅对真实跳转过的链接生效且样式受限，是浏览器为保护隐私故意设计的安全策略；实现点击切换需用 JavaScript 切换 class。
纯 HTML 无法控制点击后的颜色变化，必须用 CSS 伪类 a:visited 配合浏览器历史记录机制；但要注意：它只对真实跳转过的链接生效，且样式受限（仅 color、background-color 等少数属性可用）。
为什么 a:visited 不能随便改颜色？
浏览器出于隐私保护，对已访问链接的样式做了严格限制——你写了 color 没问题，但加 border、改 display、用 transition 或读取状态都会被静默忽略。这不是 bug，是故意设计的安全策略。
-
a:visited { color: #6c757d; }✅ 有效 -
a:visited { border: 1px solid red; }❌ 无效（无报错，但不渲染） -
a:visited { opacity: 0.8; }❌ 无效 - 想让“点击后变色”立即生效且可逆？
a:visited不适用，得用 JavaScript 切换 class
a:link、a:visited、a:hover、a:active 的顺序不能乱
这四个伪类必须按 LoVe HAte 规则写：a:link → a:visited → a:hover → a:active。顺序错会导致 :hover 覆盖 :visited，或者 :active 根本不生效。
- 错误写法：
a:hover { color: red; } a:visited { color: gray; }→ 鼠标悬停时，已访问链接仍显示红色 - 正确写法：
a:link, a:visited { color: #007bff; } a:hover, a:active { color: #0056b3; } - 如果只设
a { color: red; }，:visited仍会回退到浏览器默认紫色——必须显式重写a:visited
想实现“点一下变色、再点一下还原”，JavaScript 是唯一可靠方式
因为 :visited 只响应真实导航历史，无法用于模拟开关行为；而 :active 只在鼠标按下瞬间触发，持续不到 100ms。真要来回切换，得靠 JS 记录状态。
立即学习“前端免费学习笔记（深入）”；
- 用
classList.toggle("active")最轻量：el.addEventListener("click", () => el.classList.toggle("active")); - CSS 对应写
a.active { color: #28a745; }，别忘了补上a.active:visited（虽然它可能被忽略，但语义更清晰） - 移动端要注意
click事件有 300ms 延迟，可用touchstart替代，或启用viewport缩放控制 - 框架项目（如 React/Vue）优先用状态驱动，避免直接操作 DOM class
真正容易被忽略的是：你以为改了 a:visited 就能控制所有“点击后”的视觉反馈，但实际它只对跨页面跳转有效；单页应用里，路由变化不会触发 :visited 更新，这时候 JS 方案才是唯一解。
