移动端 :active 经常不生效是因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的该状态，仅支持 、 等交互元素；需添加 cursor: pointer、touch-action: manipulation 或 ontouchstart=""（微信新版本需 ontouchstart="void(0)"）来启用。

移动端 :active 为什么经常不生效

因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的 :active 状态，本质是浏览器为了防止误触而做的优化。只有明确具有交互能力的元素（比如 、）才会触发，普通

或 加了 :active 样式也压根不会变。

• 必须给元素添加 cursor: pointer 或 touch-action: manipulation，前者兼容性好，后者更精准但 Android 低版本支持弱
• 更稳妥的做法是加 ontouchstart="" 空属性（仅需存在，无需绑定函数），iOS 会因此认为该元素“可能响应触摸”，从而启用 :active
• 不要依赖 :hover 在移动端做点击反馈——它在大多数触屏设备上不可靠，且无延迟控制

:active 样式写法要注意的三件事

不是所有 CSS 属性都能在 :active 中生效，尤其涉及重排/重绘的属性容易被浏览器跳过或延迟渲染。

• 优先用 background-color、opacity、transform: scale() 这类合成层友好的属性；避免改 height、margin、left/top
• 记得加 transition，否则点击态会“闪一下”就消失；建议统一设 transition: background-color 0.15s, opacity 0.15s, transform 0.15s
• 如果用了 transform，要确保父容器没设置 overflow: hidden 且自身没触发 will-change: transform 冗余声明，否则可能造成视觉裁切或卡顿

替代方案：用 touchstart + touchend 手动控制类名

当 :active 不可控（比如需要长按反馈、或要兼容微信内置浏览器某些旧版本），就得手动接管状态。

• 监听 touchstart 时加 is-pressed 类，touchend/touchcancel 时移除
• 务必同时监听 touchcancel，否则手指滑出区域再松开，类名会一直挂着
• 为防点击穿透，建议在 touchstart 里加 event.preventDefault()，但只对非表单控件这么做；按钮、链接本身有默认行为，加了反而影响可访问性
• 示例：

  element.addEventListener('touchstart', () => element.classList.add('is-pressed'))

真机调试时最容易忽略的兼容细节

开发时在 Chrome 模拟器看着正常，一上真机就失效，大概率栽在这几个点上。

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

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

下载

• 微信 iOS 客户端 8.0.37+ 对 ontouchstart="" 的识别变严格，必须写成 ontouchstart="void(0)" 才能激活 :active
• 部分安卓厂商浏览器（如华为 EMUI 内置浏览器）会忽略 transition 时间小于 0.1s 的变化，建议最低设 0.12s
• 如果页面启用了 viewport 的 user-scalable=no，某些系统会连带抑制 :active 响应，临时放开缩放测试一下就能验证

真正麻烦的从来不是写几行 CSS，而是不同 WebView 对“什么算一次有效触摸”的判定逻辑差异太大——同一段代码，在 iOS Safari、微信、QQ、飞书里可能有四种表现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！