:active 伪类仅在鼠标按下未松开或触控持续时生效，无法实现点击后持久高亮；正确用法需紧跟 :link/:visited 后、避免复杂选择器；持久状态应通过 class、:target 或路由逻辑实现。
:active 伪类确实能定义链接被点击时的样式，但它的生效时机极短——仅在鼠标按下、尚未松开的瞬间触发，且移动端行为更不可靠。直接用 :active 很难达到“点击后保持高亮”这类常见需求。
为什么 :active 看起来没反应？
浏览器对 :active 的触发有严格限制：必须是用户主动按下鼠标（或触控）且未释放的状态。一旦松手，样式立即回退。这意味着：
- 页面刷新后不会保留
:active样式 - 键盘
Enter触发链接时，部分浏览器不触发:active - 移动端点击区域小、响应快，
:active几乎不可见 - 如果父元素设置了
pointer-events: none，:active也不会生效
:active 的正确写法和兼容性注意点
它必须紧跟在 :link / :visited 之后定义，否则可能被覆盖；同时要避免使用过于复杂的 CSS 选择器，否则某些旧版浏览器（如 IE11）会忽略整个规则。
a:link { color: #0066cc; }
a:visited { color: #666; }
a:hover { color: #0044aa; }
a:active { color: #ff3300; }
关键点：
立即学习“前端免费学习笔记（深入）”；
-
:active不需要 JavaScript 配合就能工作 - 不能用
transition动画延长它的持续时间（动画只在状态切换时播放，不改变触发时长） - 若链接是
button或带role="button"的元素，:active行为更稳定
想让“点击后保持颜色”，该用什么？
这是最常见的误用场景：:active 不是“已点击”状态，而是“正被按下”。真要实现点击后持久变色，得换思路：
- 服务端渲染时，根据当前 URL 给对应导航项加
class="current"，再用.current { color: red; } -
前端路由（如 React Router）用
useLocation()+className动态控制 - 纯静态页可用
:target（例如跳转到#section2后，section#section2:target匹配） - JavaScript 手动切换 class：
el.addEventListener('click', () => el.classList.add('clicked'))
强行用 :active 模拟“已点击”效果，只会导致样式闪一下就消失，用户根本来不及感知。
真正要注意的是：别把交互状态（:hover/:active）和数据状态（是否已点击/是否是当前页）混为一谈。前者由浏览器瞬时管理，后者必须由开发者显式维护。
