:active在移动端常失效因触摸与点击时机差异及iOS/安卓浏览器限制；仅对和可聚焦元素生效，普通需加tabindex或用语义化并设-webkit-tap-highlight-color等优化。
为什么 :active 在移动端经常失效
因为触摸事件和点击事件的触发时机不同，:active 在 iOS Safari 和部分安卓浏览器中默认只对 <a></a> 和可聚焦元素（如带 tabindex 的 <button></button>）生效。普通 <div> 或未设 <code>cursor: pointer 的元素点下去根本没反应。
实操建议：
- 按钮必须用语义化
<button></button>，避免用<div onclick> <li>给按钮加 <code>tabindex="0"（尤其在非表单上下文中） - 强制启用触摸反馈：在 CSS 中添加
-webkit-tap-highlight-color: transparent;，同时确保父容器没设pointer-events: none - Android Chrome 有时需要
* { -webkit-user-select: none; }配合（慎用，影响文本选择） - 写
button:active { transform: scale(0.95); transition: transform 200ms; }—— ✅ 有效，松手瞬间还原 - 写
button:active { opacity: 0.7; }但没给button设transition: opacity—— ❌ 松手时突变，无过渡 - 想靠
:active实现“点击后停留高亮”—— ❌ 这不是它的职责，得用 JS 切换 class
:active 的样式作用范围和持续时间怎么控制
:active 不是“点击后保持”，而是“鼠标按下或手指按住期间”的瞬时状态，松开就立刻退出。它不接受 transition 延迟，但可以配合 transition 做出缓入缓出效果。
常见误区：
立即学习“前端免费学习笔记（深入）”；
推荐写法：
button {
transition: background-color 0.1s, transform 0.1s;
}
button:active {
background-color: #e0e0e0;
transform: scale(0.98);
}和 JavaScript click 事件的时序冲突怎么避
用户手指按住 :active 样式生效 → 抬起触发 click → 如果 JS 里立刻修改 DOM（比如跳转、弹窗），浏览器可能来不及渲染 :active 的样式变化，造成“没反馈”错觉。
解决办法很直接：
- 确保
:active样式变更足够明显（比如加边框色、背景色、缩放，别只调opacity） - 避免在
click回调开头做同步阻塞操作（如大数组遍历、localStorage写入） - 必要时加微任务缓冲：
setTimeout(() => { /* 跳转或更新 */ }, 0)，让样式有帧机会绘制 - 更稳妥的做法：用
touchstart+touchend手动模拟，但仅在需要精确控制时才上
兼容老版本 Safari 的 :active 必须项
Safari 12 及更早版本对 :active 有严格限制：只有绑定过 click 事件监听器的元素才触发该伪类，哪怕监听器是空函数。
所以如果你的按钮是纯静态 HTML，又要求兼容旧 Safari：
- 必须给按钮加一个空的
onclick属性：<button onclick="">点我</button> - 或者用 JS 绑定空监听：
btn.addEventListener('click', () => {}); - 注意：Vue/React 等框架中，只要用了
@click或onClick就自动满足，不用额外处理
这个细节容易被忽略，尤其当测试环境全是新 Chrome，上线后 iOS 用户反馈“按钮没按下去的感觉”。
