:active 伪类仅在鼠标按下未松开或触控持续时生效，无法实现点击后持久高亮；正确用法需紧跟 :link/:visited 后、避免复杂选择器；持久状态应通过 class、:target 或路由逻辑实现。

css 想给链接在激活时显示特殊颜色怎么办_使用 :active 伪类定义点击样式 第1张

: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）和数据状态（是否已点击/是否是当前页）混为一谈。前者由浏览器瞬时管理，后者必须由开发者显式维护。