:active常失效因指针事件被拦截、元素无交互语义或移动端延迟；应检查pointer-events、z-index，用button替代div，设touch-action: manipulation，并用JS监听touchstart/touchend模拟按住状态。
为什么:active经常点不动？检查是否被指针事件拦截
最常见的情况是：元素上设置了pointer-events: none，或者父容器遮盖了点击区域（比如绝对定位的空div盖在按钮上），导致:active根本没机会触发。
- 用浏览器开发者工具检查目标元素的
pointer-events计算值，确保不是none - 检查
z-index和层叠上下文，确认没有其他元素“吃掉”了点击事件 - 移动端要注意：
:active默认延迟约300ms，若页面禁用了双击缩放（user-scalable=no）但未加touchstart模拟，可能完全不生效
:active只对可交互元素稳定生效？别硬套在div上
原生:active在规范中主要面向<a></a>、<button></button>等有交互语义的元素。给<div>或<code><span></span>加:active，在部分浏览器（尤其是旧版Safari）里行为不可靠。
- 如果必须用非语义标签，加上
tabindex="0"让它可聚焦，再配合:active会更稳 - 更推荐方案：直接用
<button type="button"></button>，样式重置后视觉完全可控，且:active天然支持键盘Space/Enter触发 - 避免依赖
:active做关键状态提示（比如表单提交按钮按下后变灰），它无法捕捉长按、快速连点等边界情况
移动端:active样式失效？加cursor: pointer只是障眼法
cursor: pointer在iOS Safari里曾是激活:active的“开关”，但这只是历史兼容手段，现代iOS已不依赖它；真正卡住的是touch-action和CSS渲染时机。
- 给触发元素设置
touch-action: manipulation，能减少300ms延迟并提升:active响应率 - 避免在
:active里改transform或opacity以外的属性（比如height、margin），重排会拖慢反馈 - 真机测试时发现无效，先关掉Chrome DevTools的“Emulate touch”——它模拟得不准确，容易误判
想让:active持续到手指抬起？纯CSS做不到，得交还给JS
:active是瞬态伪类，松开鼠标/手指立刻结束。如果需要“按住期间保持样式，抬起才恢复”，CSS本身无解。
立即学习“前端免费学习笔记（深入）”；
- 用
element.addEventListener('touchstart', ...)和'touchend'手动切换一个.is-pressed类是最稳妥的 - 注意同时监听
touchcancel，防止手指滑出区域后状态卡死 - 不要只写
touch事件，保留mousedown/mouseup以兼容鼠标和触控笔设备
真正麻烦的从来不是怎么写:active，而是它什么时候不工作、为什么看起来“点了没反应”——多数时候问题不在CSS规则本身，而在事件路径、渲染管线或设备特性上。
