移动端 :active 失效或延迟是因 iOS Safari 等浏览器默认禁用该伪类，需通过 ontouchstart=""、role="button" tabindex="0" 或使用原生可点击标签（如 ）显式声明交互意图才能激活即时响应。
移动端 :active 为什么经常失效或延迟？
因为 iOS Safari 和部分安卓浏览器默认禁用 :active 样式，直到触摸结束（甚至触发 click 事件后）才渲染，导致按压反馈“卡顿”或“看不到”。根本原因是浏览器为防止误触做了延迟判定，且仅对可交互元素（如 <a></a>、<button></button>）启用 :active，对 <div> 等默认无效。
<h3>必须加 <code>cursor: pointer 或监听 touchstart 吗？
不强制监听 JS，但纯 CSS 方案需要满足两个前提：
-
cursor: pointer在移动端无实际作用，但某些旧版 iOS 会因此“认出”该元素可交互，从而启用:active—— 可试，但不可靠 - 更稳妥的是给元素加
ontouchstart=""属性（空字符串即可），无需绑定函数，它能提前告知浏览器“此元素要响应触摸”，从而激活:active的即时响应 - 如果元素已含
onclick、role="button"或是原生可点击标签（如<button></button>），通常不用额外处理
:active 样式写法要注意哪些坑？
常见错误是只改颜色或背景，结果视觉变化太弱，用户感知不到。真正有效的按压反馈需同时满足：
- 用
background-color或opacity变化，避免仅依赖color（文字按压感弱） - 慎用
transform: scale()：iOS 上可能触发重排，造成闪烁；如必须用，建议搭配will-change: transform - 确保父容器没设
overflow: hidden且自身没被pointer-events: none拦截 - 示例写法：
.btn:active { background-color: #e0e0e0; opacity: 0.8; }
Android 和 iOS 的 :active 行为差异
iOS 更严格：只有显式声明交互意图的元素才响应 :active，且默认 300ms 延迟（即使加了 ontouchstart，首次触摸仍可能滞后）；Android 主流浏览器（Chrome、Firefox）基本遵循规范，只要元素可聚焦或有事件监听，:active 就实时生效。
立即学习“前端免费学习笔记（深入）”；
所以跨端一致的最小可行方案是：用 <button></button> 替代 <div>，或给 <code><div> 加 <code>role="button" tabindex="0" ontouchstart="" —— 这三者缺一都可能导致某平台完全没反馈。
真正麻烦的不是写法，而是测试时只在自己设备上点一下就认为“没问题”。不同 iOS 版本、微信内置浏览器、QQ 浏览器内核对 :active 的支持程度都不一样，得真机多环境点按验证。
