移动端 :active 伪类失效需三步解决：一是显式声明交互意图（role="button"等），二是加 touch-action: manipulation 消除300ms延迟，三是用 transform+box-shadow 做强视觉反馈并真机测试。
元素没被浏览器识别为可交互目标
浏览器只对语义上“可点击”的元素默认启用 :active，比如 <button>、<a>。用 <div> 或 <span> 模拟按钮时，即使写了 .btn:active { ... }，iOS Safari 和部分安卓 WebView 会直接跳过该伪类计算——不是样式错，是压根不触发。
必须显式声明交互意图：
- 加
role="button" tabindex="0"（最稳妥，兼顾键盘和屏幕阅读器） - 或加空属性
ontouchstart=""（轻量，现代 iOS 支持良好） - 或直接改用
<button type="button">（推荐，零配置即生效）
移动端 300ms 延迟导致 :active 卡顿或不可见
iOS Safari 默认等待约 300ms 判断是否双击，期间不渲染 :active 样式。用户手指按下去，视觉反馈延迟出现甚至一闪而过，感知上就是“没反应”。
解决方法只有一个关键 CSS 属性：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
touch-action: manipulation—— 它告诉浏览器“此处只做单点操作，别等、别缩放、立刻响应” - 不要全局设在
body上，仅作用于可点击区域（如.btn、[role="button"]） - 配合
-webkit-tap-highlight-color: transparent，避免系统蓝框覆盖自定义反馈
:active 样式被覆盖或未重绘
:active 是伪类，不是独立状态；它的样式会被后续同权重规则覆盖，尤其容易被 :hover 或 :focus 拦截。
检查和修复方式：
- 在开发者工具的 Styles 面板中勾选
:active强制态，看哪些属性被划掉 - 确保
:active规则写在:hover和:focus之后（但早于:focus-visible） - 避免写成
.btn:hover:active这种组合选择器——一旦:hover里定义了background-color，:active就失效 - 所有
transition必须写在常态选择器里，例如button { transition: transform 0.06s, background-color 0.08s; }
视觉变化太弱，人眼根本察觉不到
只改 color 或轻微调暗 background-color 在小屏、强光、快速点击下几乎无效。人眼对位置和形变更敏感。
真正有效的反馈组合：
- 必加
transform: scale(0.96)（比translateY更稳，iOS 不易闪烁） - 配
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15)模拟受压阴影 - 禁用
overflow: hidden的父容器，否则缩放后边缘被切掉 - 避免在
:active中改height、margin等触发重排的属性
真机测试时，Chrome DevTools 的设备模拟器基本不可信——它不发真实 touch 事件，:active 往往压根不触发。不同 iOS 版本、微信内置浏览器、QQ 浏览器内核对 :active 的支持程度差异很大，得拿多台真机点按验证。
