移动端 :active 经常不生效是因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的该状态，需添加 cursor: pointer、touchstart/click 事件或 ontouchstart="" 等方式激活；同时需处理 -webkit-tap-highlight-color 和 touchcancel 等细节以确保反馈及时稳定。
移动端 :active 为什么经常不生效
因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的 :active 状态，除非该元素有 cursor: pointer 或监听了 touchstart / click 事件。纯 <div> 或 <code><span></span> 加 :active 样式，在真机上大概率没反应。
- 给元素加
ontouchstart=""（空属性）是最轻量的绕过方式，兼容性好且无副作用 - 更稳妥的做法是加
role="button"+tabindex="0"，既激活:active，又保无障碍访问 - 避免只依赖
:active做关键反馈（比如按钮按下变色），应配合 JavaScript 的touchstart/touchend手动加类控制
如何让 :active 反馈更及时、不闪跳
iOS 上默认有 300ms 延迟，且点击后会高亮一层半透明灰（-webkit-tap-highlight-color），干扰自定义样式。不处理的话，用户会感觉“点了但没反应”或“颜色突然闪一下”。
- 全局禁用点击高亮：
* { -webkit-tap-highlight-color: transparent; }，但别写在body或html上，避免影响表单控件 - 对按钮类元素单独设：
button, [role="button"] { -webkit-tap-highlight-color: transparent; } - 如果用了
position: fixed或transform，某些安卓机型可能仍卡顿，此时建议改用touch-action: manipulation提升响应优先级
伪类和 JS 状态类混用时的冲突点
当同时用 :active 和 JS 添加的 .is-pressed 类控制样式时，CSS 优先级和触发时机容易打架——比如手指还没抬起来，JS 已移除类，:active 又补上，造成闪烁或状态残留。
- 统一交由 JS 控制：去掉
:active，全程用touchstart加类、touchend/touchcancel移除类 - 若保留
:active作降级，确保它的样式和 JS 类完全一致，且不要用!important撑优先级 - 注意
touchcancel必须监听——手指滑出元素再松开，touchend不会触发，不处理就会卡在按下态
真机调试时哪些细节容易被忽略
开发时在 Chrome 模拟器里看着正常，一上真机就失效，往往不是逻辑错，而是环境差异没对齐。
立即学习“前端免费学习笔记（深入）”；
- 检查 viewport 是否漏了
user-scalable=no——虽然不推荐禁缩放，但若写了，某些安卓浏览器会连带抑制:active响应 - 确认元素没有
pointer-events: none或父级透传了该属性 - iOS 微信内置浏览器对
:active支持极差，尤其在position: absolute+z-index层叠场景下，基本只能靠 JS
真机上最稳的路径其实是：加 ontouchstart → 清掉 -webkit-tap-highlight-color → 用 JS 控制按压态。CSS 伪类只当 fallback，别指望它扛主力。
