:active伪类不生效主因是被:focus覆盖或缺少user-select等移动端适配；应将其置于:hover/:focus后、用transition控制常态属性、避免重排操作，并在兼容性差的环境用js fallback。
active伪类不生效？检查是否被:focus覆盖或缺少user-select
很多情况下点击按钮没反馈，不是:active写错了，而是它被后续声明的:focus样式盖掉了——CSS里后写的规则优先级相同就赢。另外iOS Safari和部分安卓WebView里，如果元素没设user-select: none或-webkit-tap-highlight-color: transparent，系统自带点击高亮会干扰:active视觉表现。
- 把
:active规则放在:hover和:focus之后（但别放最后，否则可能被:focus-visible覆盖） - 对按钮类元素加
user-select: none，避免文字选中打断状态切换 - 移动端必须加
-webkit-tap-highlight-color: transparent，否则点下去先闪蓝框再变色 - 不要依赖
:active做关键交互反馈（比如开关状态），它只在鼠标按下/手指按住期间存在
用transition配合active实现平滑压下效果
:active本身是瞬时状态，想让它“缓出”得靠transition作用于其他属性。常见误区是给:active单独加transition，其实应该写在常态选择器上，让属性变化过程可过渡。
- 写法正确：
button { transform: scale(1); transition: transform 0.1s; } button:active { transform: scale(0.95); } - 错误写法：
button:active { transform: scale(0.95); transition: transform 0.1s; }（按下瞬间才开始过渡，松开立刻跳回） - 慎用
background-color过渡：颜色变化太慢会显得迟钝，建议控制在0.08s以内 - 避免在
:active里改display、height等触发重排的属性，卡顿明显
JavaScript fallback必要吗？哪些场景必须监听mousedown/touchstart
纯CSS :active在桌面端基本可靠，但在某些场景下它根本不会触发：比如按钮绑了preventDefault()，或者父容器有pointer-events: none但子元素又需要响应点击；还有React/Vue里事件代理导致原生状态丢失。
- 当按钮内含
event.preventDefault()（如自定义右键菜单）时，:active失效，必须用JS手动加class - 使用
touchstart而非click监听——click有300ms延迟，用户松手才触发，压感断层 - 记得在
touchend或mouseup里移除class，不然状态会卡住 - 别用
ontouchstart内联写法，容易和框架事件冲突；统一用addEventListener并设{ passive: false }
兼容性雷区：Safari 15.4+ 和旧版Android WebView的特殊行为
Safari 15.4起默认禁用:active在非可点击元素上的表现（比如div加onclick），而老版Android WebView（4.4–6.0）根本不支持:active在非<a></a>或<button></button>上的触发。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素有
cursor: pointer且tabindex="0"，Safari才认它是“可激活”的 - Android 4.4 WebView里，
:active只对<button></button>、<input type="button">、<a href></a>有效，其他一律忽略 - 测试时别只看Chrome DevTools模拟，真机连USB调试更准——特别是三星自带浏览器
- 如果项目要兼容Android 4.x，直接放弃
:active，全用JS class切换
真正难的不是写对:active，而是判断什么时候它压根不会动，以及用户手指离开屏幕那几十毫秒里，你提供的反馈是否真实可信。
