a:active伪类用于设置链接点击瞬间的颜色，仅在鼠标按下未松开时生效，松开即恢复，无法持久变色。
点击瞬间的链接颜色用 a:active 控制
浏览器默认会在用户按下鼠标左键但尚未松开时，短暂显示链接的“激活态”，这个状态只能靠 a:active 伪类捕获。它不等于“已跳转”或“页面加载中”，而是纯粹的鼠标按下时刻——哪怕你松开手后没跳转，只要按下了，a:active 就会生效。
常见错误现象：a:active { color: orange; } 写了但几乎看不到效果——多数是因为样式持续时间太短（通常
- 必须确保它写在
a:hover之后，否则:hover 可能拦截并掩盖 active 效果 - 别依赖
!important强行提权，先检查是否被父级color继承覆盖 - 移动端上，
a:active在部分 iOS Safari 中表现不稳定，可加* { -webkit-tap-highlight-color: transparent; }配合测试
a:active 和 :focus 容易混淆，但作用完全不同
a:active 是瞬时鼠标/触摸事件，而 a:focus 是键盘 Tab 导航或 JS 主动调用 .focus() 后的焦点状态。两者颜色可以一样，也可以不同；但若只改 :focus 却期待点击变色，就永远看不到效果。
使用场景：无障碍访问要求链接获得焦点时有明显视觉反馈，此时 a:focus 更关键；而想给鼠标用户一点“我按下去了”的确认感，才用 a:active。
- 键盘用户不会触发
a:active，所以不能只靠它做可访问性保障 - 如果用了
outline: none清除焦点框，务必补上a:focus { color: #0056b3; }等替代样式，否则盲人用户会丢失焦点位置 - 现代写法常合并处理：
a:active, a:focus { color: #0056b3; }，但要知道它们触发条件完全独立
为什么 a:active 常被忽略或失效
不是 CSS 写错了，而是它被更早定义、更高优先级的规则压制了。尤其当页面里混用了内联 style="color: ..." 或全局 a { color: ... } 时，a:active 很容易被“继承色”盖掉。
性能与兼容性影响：所有主流浏览器都支持 a:active，但它的渲染优先级低于 :hover 和 :visited，且不能搭配 transition 动画（浏览器禁止对 active 态做过渡）。
- 检查开发者工具里该规则是否被划掉——如果是，点开右侧 Styles 面板看哪条规则赢了层叠计算
- 避免在
a:active里设置text-decoration或background-color等非 color 属性，部分旧版 IE 渲染异常 - 真要加点击反馈，更可靠的做法是用 JS 监听
mousedown添加临时 class，再用 class 控制颜色
实际可用的最小完整链接状态链
只写 a:active 不够，必须和其它状态配合才能稳定生效。标准顺序是 LVHA（Link → Visited → Hover → Active），漏掉任一环都可能让颜色逻辑崩掉。
可复制粘贴的最小可行配置：
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #003d80; }
注意：这里没写 a:focus，因为它的用途和触发路径不同；如需兼顾键盘操作，得额外加一行 a:focus { outline: 2px solid #007bff; }。
真正容易被忽略的是：很多团队只测鼠标悬停，却从不按住鼠标左键不动去观察 a:active 是否真的变了色——那个瞬间才是用户感知“我点了”的唯一信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
