ios safari的:active伪类默认仅对语义化可交互元素（如）生效，div等普通元素即使添加事件监听也不会触发；需通过body绑定passive touchstart或改用js控制is-active类实现可靠反馈。
iOS Safari 的 :active 伪类在大多数触摸场景下默认不生效，不是你 CSS 写错了，是系统策略限制 —— 必须触发“可点击行为”（如 <a></a>、<button></button>）或手动激活 touch 响应层。
为什么直接写 :active 在 div 上没反应
iOS Safari 为节省资源，默认只对“语义化可交互元素”启用 :active 样式渲染。普通 <div> 或 <code><span></span> 即使加了 onclick 或 ontouchstart，也不会自动触发 :active 状态。
- 现象：
div.btn:active { background: red; }在真机上完全无视觉反馈 - 原因：该元素未被识别为“可激活”，WebKit 不会为其创建 active state stack
- 关键点：仅靠
cursor: pointer或touch-action: manipulation无法绕过此限制
用 body 绑定 touchstart 确实能“唤醒” :active，但有严格前提
这个技巧本质是让 iOS 认为页面进入了“触摸交互模式”，从而临时启用全局 :active 渲染。但它只在满足以下全部条件时才可靠：
- 必须在
上绑定touchstart，且不能preventDefault() - 目标元素需带
cursor: pointer（部分 iOS 版本还要求user-select: none） - 不能在事件中修改 DOM 结构或触发重排（否则可能中断 active 流程）
- iOS 15.4+ 对该机制进一步收紧，纯
touchstart已不够，建议同时加click监听
最小可行代码：
document.body.addEventListener('touchstart', () => {}, { passive: true });
// 注意：空回调 + passive: true 是关键；加 preventDefault() 反而失效
更稳定的做法：放弃 :active，改用 JS 控制 class
依赖系统 :active 的兼容性太脆弱，尤其在 iOS 16+ 和微信内置浏览器中表现不一。推荐用显式状态管理：
- 监听
touchstart添加.is-active类，touchend/touchcancel移除 - 用
pointerdown+pointerup兼容 iOS/Android/桌面端（注意pointercancel） - 避免在
touchstart中做异步操作（如fetch），否则用户松手时 class 还没移除 - CSS 写成
.btn.is-active { background: red; }，彻底脱离伪类限制
示例片段：
el.addEventListener('pointerdown', () => el.classList.add('is-active'));
el.addEventListener('pointerup', () => el.classList.remove('is-active'));
el.addEventListener('pointercancel', () => el.classList.remove('is-active'));
容易被忽略的细节
即使用了 body 绑定方案，仍可能失败：
-
meta viewport缺失或user-scalable=no会干扰 touch 响应链 - 父容器设置了
overflow: hidden且内容超出，在某些 iOS 版本下会吞掉touchstart - 使用了
fastclick或类似库时，它会接管事件并屏蔽原生:active触发路径 - CSS 中若对
:active使用了transition，但未设初始transition-property，动画会卡住
真机调试时，优先检查 getComputedStyle(el).getPropertyValue('background-color') 是否在 touchstart 后瞬间变化 —— 这比肉眼观察更准。
