:active伪类在移动端不触发的根本原因是浏览器未进入激活流程，需显式声明可点击性。具体包括：元素语义缺失（需role="button" tabindex="0"）、touch-action未设为manipulation、父级拦截事件；推荐添加ontouchstart=""属性并配合三行保底CSS：-webkit-tap-highlight-color: transparent、touch-action: manipulation、cursor: pointer；:active动画仅用transform和opacity以避免重绘重排。
移动端 :active 伪类不触发，不是 CSS 写错了，而是浏览器压根没让它进激活流程——必须显式声明“这个元素要被点”，否则 iOS Safari 和多数 WebView（微信、QQ）直接跳过计算。
为什么 :active 在真机上完全没反应
常见现象是样式写得没问题，模拟器里也正常，但手指一按就“静音”。根本原因有三个：
- 元素语义缺失：用
<div class="btn">代替<button>，且没加role="button" tabindex="0"，iOS WebKit 不认为它是可激活目标 -
touch-action缺失或错配：没在按钮上设touch-action: manipulation，浏览器会等 300ms 判断是否双击，期间不进入:active状态 - 父级拦截：外层容器设了
pointer-events: none或overflow: hidden，触摸事件传不到目标元素
ontouchstart="" 比 JS 监听更可靠
给目标元素加空属性 ontouchstart="" 是目前最轻量、最稳定的声明方式。它不需要执行 JS，也不依赖页面加载顺序，iOS 12+ 全面支持。
- 比
document.body.addEventListener('touchstart', ...)强：后者在 iOS 15+ 后大幅失效，且容易漏掉removeEventListener导致内存泄漏 - 只作用于当前元素：不影响轮播图滚动、地图拖拽等其他手势
- 必须配合语义：单独加
ontouchstart=""不够，<div>还得补role="button" tabindex="0"，否则旧版 iOS 仍可能忽略
三行保底 CSS 缺一不可
仅靠 HTML 属性还不够，CSS 层必须同步关闭干扰、明确意图：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-tap-highlight-color: transparent：干掉 iOS 默认灰膜，否则你的:active样式会被盖住 -
touch-action: manipulation：必须写在按钮选择器上（如button, [role="button"]），不能只写body或全局通配 -
cursor: pointer：虽在移动端无功能，但部分旧环境会把它当作“可点击”信号，建议保留
示例写法：
button, a, [role="button"] {<br> -webkit-tap-highlight-color: transparent;<br> touch-action: manipulation;<br> cursor: pointer;<br>}
:active 动画只用 transform 和 opacity
:active 生命周期极短（约 60–100ms），改 background-color 或 box-shadow 会触发重绘，低端安卓机明显卡顿；改 width/height 更会强制重排。
- 推荐组合：
transform: scale(0.98)+opacity: 0.85 - 过渡必须定义在常态下：
button { transition: transform 0.06s ease, opacity 0.08s ease; }，别写在:active里 - 避免仅靠
opacity反馈：透出下层文字或背景时易错位，最好搭配轻微缩放
真正麻烦的不是怎么写，而是测试时只在自己设备上点一下就认为“没问题”。不同 iOS 版本、微信内置浏览器、QQ 浏览器内核对 :active 的支持程度都不一样，不连真机多环境点按验证，很容易漏掉首次触摸无反馈、动态插入节点失效等关键问题。
