:active仅在鼠标按下或手指按住的瞬间生效，非点击后持久高亮；需JS控制class或:checked+label实现状态保持；增强反馈宜用transform、背景色变化等，并注意移动端兼容性与合法伪类顺序。
点击时元素没反应？:active 本身不持久
直接写 a:active { color: red; } 看起来没效果，不是代码错，是理解偏差。:active 只在鼠标按下、手指按住的那几十毫秒内生效，松开就立刻恢复。它不是“点击后保持高亮”，而是“正在被按下的瞬间状态”。真要实现点击后保留高亮，得靠 JS 控制 class，或者用 <input type="checkbox"> 配合 :checked + 隐藏+label 模拟——但那是另一套逻辑。
:active 的兼容性和触发条件
所有现代浏览器都支持 :active，但有两点容易踩坑：
- 移动端需要给元素加
cursor: pointer或tapping-enabled类（某些旧 iOS 版本），否则可能不触发 - 父容器设了
overflow: hidden且子元素超出边界时，部分安卓 WebView 下:active会失效 - 不能链式写成
button:active:hover，顺序和组合必须合法：button:hover:active才对
怎么让 :active 看起来更明显？
单纯改颜色常被忽略，因为时间太短。实际项目中常用这些手法增强反馈感：
- 加
transform: scale(0.98)或translateY(1px)，视觉上更像“按下去” - 配合
transition控制过渡，比如transition: all 0.1s ease，但注意:active本身不触发 transition 的“离开”过程 - 背景色变化比文字色更易察觉，推荐用
background-color+opacity微调 - 避免只依赖颜色变化——色盲用户可能完全看不出
button:active {
background-color: #e0e0e0;
transform: translateY(1px);
}
别把 :active 当点击态存储用
这是最常误用的点。比如想实现“点一次变蓝，再点变回”，只靠 :active 做不到。它没有记忆能力，也不改变 DOM 状态。真正需要“切换高亮”的场景，该用：
立即学习“前端免费学习笔记（深入）”；
- JS 切换
class="is-active"，然后写.is-active { ... } - 表单控件如
<input type="radio">或<input type="checkbox">，配合:checked - React/Vue 等框架里用 state 控制 className
硬塞 :active 去模拟，结果就是点一下闪一下，用户根本来不及确认是否点成功。
