iOS Safari默认忽略:active，因仅对语义化交互元素（如button、a或divrole="button"）启用该状态；需配合ontouchstart=""、touch-action: manipulation和-webkit-tap-highlight-color: transparent方可生效。
:active 在某些移动浏览器（尤其是 iOS Safari）中不触发，根本原因不是 bug，而是浏览器主动跳过了伪类匹配流程——它压根没把你的元素当成“可激活目标”。
为什么 iOS Safari 默认忽略 :active？
iOS WebKit 对 :active 的触发有明确语义门槛：只对浏览器认定为“交互控件”的元素启用该状态。纯 <div>、<span> 即使加了 onclick 或 cursor: pointer，也大概率被跳过。这不是渲染延迟，是状态机根本没进入 :active 分支。
- 原生
<button>和<a href>天然满足条件，零配置即生效 -
<div role="button" tabindex="0">是最轻量的语义补全方案，缺一不可 -
ontouchstart=""是 HTML 层面的“开关声明”，iOS 12+ 稳定支持，比 JS 绑定更底层、更可靠
:active 样式写了但看不见的常见原因
即使状态被正确触发，视觉反馈也可能失败——因为变化太弱、过渡缺失或被系统层覆盖。
- 单靠
background-color变化在强光屏/深色背景上几乎不可见 - 没写
transition：变化是瞬时的，人眼无法捕捉（:active持续仅 60–100ms） - 漏掉
-webkit-tap-highlight-color: transparent：iOS 默认灰膜会盖住你的样式 -
transform: scale(0.98)比translateY(1px)更稳，后者在部分机型上会触发重排闪烁
移动端必须加的两条 CSS 规则
这两条不是“可选优化”，而是 :active 能被看见的前提：
立即学习“前端免费学习笔记（深入）”；
-
touch-action: manipulation—— 加在按钮元素本身（不是body），告诉浏览器“这里只点按，别等双击、别缩放”，否则 300ms 延迟会卡住状态触发 -
-webkit-tap-highlight-color: transparent—— 必须显式清除，否则系统高亮层先闪一下，再叠你的:active，用户只看到灰膜
最容易被忽略的其实是触控区域尺寸：min-height: 48px 是 iOS 的硬性要求，文字撑不开点击区时，:active 直接被忽略——哪怕所有代码都写对了。
