移动端:active失效主因是300ms点击延迟，需viewport设置、touchstart监听或pointerdown替代；CSS优先级、声明顺序及继承问题亦会导致覆盖；推荐transform缩放+过渡优化反馈，复杂交互应JS控制类名。
为什么:active在移动端经常失效
因为移动端浏览器默认有约300ms的点击延迟，用于判断用户是否要双击缩放，这导致:active状态来不及触发或一闪而过。不是CSS写错了，是浏览器行为拦截了原生点击响应。
- 给
<meta name="viewport">加上width=device-width, initial-scale=1，这是前提 - 对需要响应的元素添加
touchstart事件监听（哪怕空处理），可提前唤醒触摸响应 - 更稳妥的做法：用
pointerdown代替click做交互逻辑，它比touchstart兼容性更好，且无延迟
:active样式不生效的常见写法陷阱
CSS优先级和层叠顺序会直接覆盖:active。它不是“最高优先级”，只是伪类之一，照样会被后面声明的同级规则干掉。
- 避免写成
a:link { color: blue; } a:active { color: red; } a:hover { color: green; }——:hover在后，会盖掉:active的color - 把
:active放在:hover之后声明，但注意：如果:hover用了!important，:active也得跟上才能赢 - 不要依赖继承：比如
button:active { background: #ccc; }在父容器有background: transparent时可能被误覆盖，显式重置更稳
怎样让:active反馈更明显、更可控
单纯改颜色太弱，用户可能察觉不到；纯靠transform又容易因布局偏移引发重排。关键是在视觉变化和性能间找平衡。
- 优先用
transform: scale(0.95)而非width/height缩放，GPU加速且不触发布局 - 加
transition: transform 0.1s ease，但别给:active本身设transition——它只定义“按下时什么样”，过渡由常态规则控制 - 对文字按钮，可配合
opacity: 0.8+transform，比单改颜色容错率更高（尤其在深色/浅色背景切换时）
替代方案：当:active真不够用时怎么办
比如要支持长按、多次点击、或需要精确控制按下/抬起时机，CSS伪类就力不从心了。这时候该切到JS控制类名。
立即学习“前端免费学习笔记（深入）”；
- 监听
pointerdown时加is-pressed类，pointerup/pointercancel时移除 - 在CSS里写
.btn.is-pressed { transform: scale(0.92); }，完全绕过:active的限制 - 注意清除
pointercancel：手指滑出按钮区域、系统弹窗打断等场景都会触发，漏处理会导致“卡在按下态”
:active，而是预判它在哪种设备、哪种嵌套结构、哪种用户操作路径下会静默失败——多测真机，少信模拟器。 
