移动端 :active 经常不生效，因 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的 :active 状态；需添加 cursor: pointer 或 onclick="" 激活，或配合 touch-action: manipulation 提升兼容性与响应速度。
移动端 :active 为什么经常不生效
因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的 :active 状态，本质是「不触发伪类重绘」。只有被浏览器识别为“可交互”的元素（如 <a></a>、<button></button>）才默认响应，普通 <div> 或 <code><span></span> 需要手动干预。
- 最直接的解法：给元素加
cursor: pointer（仅 CSS）或onclick=""（HTML 层面空事件），二者选其一即可激活状态检测 - 更稳妥的做法是加
touch-action: manipulation，它告诉浏览器“这个区域只做轻点操作”，能同时提升响应速度并启用:active - 注意不要依赖
:hover做点击反馈——移动端没有稳定 hover 状态，纯靠:active+ 手动触发
:active 样式写法和兼容性要点
写法本身很简单，但容易忽略渲染时机和平台差异。iOS 上 :active 的持续时间极短（约 100ms），而某些安卓机型会卡住状态不释放，导致样式残留。
- 必须用
!important覆盖内联样式或高优先级规则（比如框架自带的color或background） - 避免在
:active中改transform或opacity以外的属性，尤其是height、margin这类触发布局重排的，会导致卡顿 - 安卓 Chrome 85+ 支持
:active在非表单元素上无需额外 hack，但 iOS 15.4 之前仍需cursor: pointer或空onclick
button, .clickable {
cursor: pointer;
touch-action: manipulation;
}
.clickable:active {
background-color: #e0e0e0 !important;
}
用 JavaScript 补充 :active 的边界情况
当需要精确控制反馈时长、或元素动态生成（比如 Vue/React 渲染的列表项），纯 CSS :active 不够用。这时得靠 JS 模拟状态。
- 监听
touchstart添加临时 class（如is-pressed），touchend/touchcancel移除——比:active更可控 - 务必同时监听
mousedown，否则桌面端调试时失效；但注意 PC 端不要误触发（可用if ('ontouchstart' in window)分流） - 别忘了处理
blur或路由跳转等意外中断场景，防止 class 残留
为什么不用 tap-highlight-color
这个 CSS 属性只能改 iOS 点击时的灰色半透明覆盖层颜色，无法自定义形状、位置或动画，且安卓完全不支持。它只是系统级反馈的皮肤调节，不是真正的点击态控制。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-tap-highlight-color: transparent只是关掉默认高亮，不是实现变色效果的手段 - 如果关了又没配
:active或 JS 状态，用户会感觉“点不动”——视觉反馈彻底消失 - 现代开发中，它只作为辅助项存在，主逻辑必须落在
:active或 class 切换上
真正在意点击反馈的细节，就得接受：CSS :active 是基础，但移动端永远要多一层防御性处理——要么加 cursor 和 touch-action，要么用 JS 补位。漏掉任意一环，用户手指落下去那一刻，就可能没反应。
