a:link和a:visited必须按lvha顺序声明，且仅color等极少数属性对:visited有效；href无效（如#、javascript:）或file://协议不会触发已访问状态。
a:link 和 a:visited 就是控制点击前后的关键，但必须注意：浏览器只认“是否成功跳转过”，不是“是否点过”。没跳转的点击（比如 href="#" 或 href="javascript:void(0)"）不会触发 a:visited。
为什么点了链接颜色不变？
常见原因不是 CSS 写错了，而是链接根本没被浏览器视为“已访问”：
-
href值为空、为#、为javascript:...—— 这些不会记录访问历史 - 链接指向的是本地文件（
file://协议）—— 大多数现代浏览器禁用:visited样式以保护隐私 - 页面用了
rel="noreferrer"或target="_blank"且未加rel="noopener"，部分场景下也会影响访问状态判定 - CSS 中
a:visited出现在a:hover之后，且没写全 LVHA 顺序，导致被覆盖
a:visited 能设哪些样式？
出于隐私限制，a:visited 只允许设置极少数属性，其他一律忽略：
- ✅ 允许：
color、background-color、border-color、outline-color、column-rule-color - ❌ 禁止：
font-size、display、margin、padding、transform、visibility—— 写了也不生效 - ⚠️ 注意：
text-decoration虽未明确禁止，但部分浏览器（如 Chrome 120+）已限制其在:visited中的行为，建议只依赖color
LVHA 顺序不能乱
伪类必须按 :link → :visited → :hover → :active 的顺序书写，否则 :hover 可能覆盖掉 :visited：
/* 正确顺序 */
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #dc3545; }
<p>/<em> 错误：:hover 在 :visited 前，鼠标一悬停就盖掉已访问色 </em>/
a:hover { color: red; }
a:visited { color: purple; } /<em> 这行基本无效 </em>/</p>
想让“点一下就变色并保持”，别依赖 :visited
如果目标是用户点一次后颜色永久改变（比如菜单项高亮），:visited 不适用 —— 它只响应真实导航。这时得靠 JS + class：
- 监听
click事件，给<a></a>添加自定义 class（如is-selected） - 用 CSS 定义
a.is-selected { color: #28a745; } - 注意：若需跨页面保留状态，还得配合 localStorage 或服务端逻辑
真正容易被忽略的点是：你以为点了就“已访问”，其实浏览器只认跳转；你以为写了 background-color 就能生效，但它在某些上下文里会被静默丢弃。做之前先确认链接协议、href 值、样式顺序，再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
