:visited是唯一原生实现点击后持久变色的方案，但仅支持color、background-color等有限颜色属性，禁用opacity、transform等非安全样式，且必须严格遵循lvha顺序声明。
点击瞬间的颜色变化只能靠 :active，它不是“点击后保持”，而是“按下时生效”，松开就退；想让链接“点击后变色并保留”，:visited 是唯一原生方案，但能力极弱——仅支持 color、background-color 等有限属性，且不能动画、不能读取状态、不能跨域共享。
为什么 :active 颜色一闪就没了
:active 是瞬态伪类，只在鼠标按下（或触摸开始）的毫秒级窗口内匹配。它不记录状态，也不依赖历史，纯粹是 UI 响应信号。
- 常见错误：把
a:active { color: #c00; }当作“已点击标记”，结果用户松手就恢复原色 - 移动端行为更隐蔽：触摸屏上
:active通常只在 touchstart 触发，且无 hover 干扰，但若页面有 fastclick 或 preventDefault，可能完全不触发 - 与
:hover共存时，:active优先级更高，但持续时间短，容易被视觉忽略——建议配合轻微位移（transform: translateY(1px)）或背景色加深，增强反馈感
:visited 能改什么颜色？哪些写法会静默失效
现代浏览器（Chrome ≥15、Firefox ≥4、Safari ≥6）强制限制 :visited 可用样式，只为防止通过 CSS 探测用户浏览历史。所有超出范围的声明都会被忽略，DevTools 里显示为“已禁用”，但不报错。
- ✅ 安全可用：
color、background-color、border-color（含border-top-color等方向变体）、outline-color、text-decoration-color - ❌ 静默失效：
opacity、transform、font-size、display、visibility、width、height、任何渐变（linear-gradient）或滤镜（filter） - ⚠️ 颜色值也受限：避免用
rgba()、hsl()、带 alpha 的 hex（如#ff000080），部分浏览器会降级为默认色；纯 hex（#666）或命名色（darkgray）最稳
LVHA 顺序不是建议，是生效前提
伪类叠层规则由浏览器硬编码：:link → :visited → :hover → :active。顺序错，样式就不可控——不是“可能不生效”，而是“必然被覆盖”。
- 错误写法：
a:hover { color: red; } a:visited { color: purple; }→ 用户悬停一个已访问链接，看到的仍是红色，因为:hover在后，权重相同时胜出 - 正确写法必须严格按 LVHA：
a:link、a:visited、a:hover、a:active四者连续声明，中间不插其他规则 - 如果用了 class（如
.nav-link:visited），选择器权重提升可绕过 LVHA，但逻辑混乱，维护成本高；业务中仍应按 LVHA 组织，再用 class 做局部覆盖
真正需要“点击后持久变色”？别硬扛 :visited
当设计要求已访问链接带图标、加边框、改 padding、甚至做淡入动画时，:visited 已经力不从心。它的定位从来不是状态管理工具，而是隐私妥协下的视觉补丁。
- 可靠路径是 JS + 存储：
localStorage记录点击过的href，加载时比对并添加自定义 class（如is-visited-js），CSS 完全自由控制 - 注意边界：同源限制下
localStorage无法跨子域共享；若需服务端协同（如用户登录后同步阅读状态），必须走 API 标记 + class 注入 - 最容易被忽略的一点：
:visited对href="#top"或href="javascript:void(0)"无效——它只响应真实跳转的 URL。测试时务必用带协议和路径的有效链接（如https://example.com/page）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
