移动端 :active 伪类在真机不触发是因浏览器未激活，需加 cursor: pointer、touchstart 事件或 role="button" + tabindex="0"；必设 touch-action: manipulation 消除延迟，并配合 transition 与 -webkit-tap-highlight-color: transparent。

移动端 :active 伪类在真机上经常不触发，不是你写错了，而是浏览器默认没激活它。

为什么 :active 在 iOS 和部分安卓 WebView 上不生效

纯 <div>、<code><span></span> 或没加交互属性的元素，即使写了 :active 样式，在真机 Safari 或旧版 WebView 中根本不会响应。这不是 CSS 失效，而是浏览器压根不给它触发机会。

• 必须让元素“被识别为可点击”：加 cursor: pointer、监听 touchstart 事件，或最轻量的 ontouchstart=""
• role="button" + tabindex="0" 更稳妥，兼顾无障碍访问
• 链接（<a href></a>）和按钮（<button></button>）天然支持 :active，但依然建议补上 touch-action: manipulation

touch-action: manipulation 是消除延迟和提升反馈的关键

这个属性不是可有可无的装饰，它直接告诉浏览器：“别等双击，别管缩放，点完立刻执行”。没有它，:active 可能延迟 100–300ms 才出现，甚至被系统高亮覆盖。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 只对需要点击响应的元素设置，比如 .btn、.card、.nav-item
• 不要全局设在 body 上，否则可能意外禁用页面滚动或缩放
• iOS 9.2+、Android 4.4+ 均支持，兼容性足够好

用 transition 控制反馈动画，但别乱用 opacity

没有 transition 的 :active 切换会生硬卡顿，像按钮“抽搐”了一下；但用 opacity 做反馈容易透出下层内容，尤其在滚动容器里错位明显。

• 推荐组合：background-color + transform: scale(0.98) + box-shadow: inset
• 过渡时间要短：transition: background-color 0.15s ease, transform 0.08s ease
• 务必同时设置 -webkit-tap-highlight-color: transparent，避免系统高亮和自定义反馈打架

真机调试时最容易忽略的三个点

桌面 Chrome 模拟器几乎不触发 :active —— 因为没真实 touch 事件。所以：

• 别信 DevTools 的 “Toggle device toolbar” 预览效果，必须上真机
• 禁用 user-select: none 或 pointer-events: none，它们会悄悄抑制 :active
• 如果用了 transform: translateZ(0) 或其他硬件加速 hack，检查是否意外创建了新的 stacking context，导致 :active 层级被遮盖