移动端 :active 不触发的根本原因是浏览器未将元素识别为可交互对象，需满足语义化标签、role="button"+tabindex="0"、ontouchstart=""、touch-action: manipulation 等条件，并避免 pointer-events: none 等干扰。
根本原因不是样式写错了，而是浏览器压根没触发 :active 状态——iOS Safari 和多数安卓 WebView 默认不把它当作“可点击元素”来处理。
移动端 :active 不触发的硬性条件
浏览器只对明确声明“我可被交互”的元素启用 :active，普通 <div> 即使加了 <code>cursor: pointer 或 onclick 也大概率被跳过：
- 必须是原生可点击语义化标签（
<button></button>、<a></a>） - 或显式声明交互身份：
role="button" tabindex="0"（兼顾键盘与读屏器） - 或加空属性
ontouchstart=""（轻量但需动态插入时手动补） - 父容器不能有
pointer-events: none或overflow: hidden截断事件流
touch-action: manipulation 必须加在目标元素上
这个属性不继承，也不支持全局设置。写在 body 或通配符选择器里基本无效，还可能让轮播图/列表滑不动：
- 只对真正响应点击的元素生效：
button、a、带role="button"的div - 检查 DevTools 的 Computed 面板，确认
touchAction值确实是manipulation，而非被父级覆盖为auto或none - Android 4.4+ / iOS 9.2+ 支持良好；旧版 UC 或部分 WebView 返回空字符串，说明未识别，需降级处理
:active 生命周期太短，纯 CSS 反馈不可靠
:active 只存在于手指按住到松开之间的毫秒级窗口，且极易被中断（比如轻微滑动、快速抬起、focus 状态缺失）：
- 别依赖
background-color或box-shadow变化——低端安卓机重绘卡顿，iOS 上还常被系统高亮盖住 - 推荐只用
transform和opacity：.btn:active { transform: scale(0.96); opacity: 0.85; } -
transition必须写在常态下，且只列要动的属性：transition: transform 0.08s ease, opacity 0.12s ease; - 务必配
-webkit-tap-highlight-color: transparent;，否则 iOS 灰层会先闪一下再覆盖你的样式
真机测试前必查的三个盲点
本地模拟器永远正常，问题全在真实链路上：
- 页面首次加载后，是否至少有一次真实触摸操作？iOS Safari 要求“唤醒”后
:active才可能生效 - 动态插入的按钮（如 AJAX 渲染的列表项），是否手动补了
ontouchstart=""或role="button"？ - 微信内置浏览器、QQ 浏览器、iOS 17+ Safari 对
:active的支持程度不一，不能只测自己手里的设备
真正麻烦的不是怎么写，而是误以为“写了就等于有效”。:active 在移动端本质是个弱信号，一旦涉及精确反馈节奏（比如长按、连点、压感动画），就得把状态控制权交还给 JS，用 touchstart/touchend 切换 is-pressed 类——这不是妥协，是绕过浏览器限制的务实做法。
