移动端 :active 伪类不生效的根本原因是 iOS Safari 和多数 WebView 默认不触发激活态计算，需通过 ontouchstart="" 声明触摸意图，并配合 touch-action: manipulation 和 -webkit-tap-highlight-color: transparent 才能稳定生效。
移动端 :active 伪类不生效的根本原因
不是 CSS 写错了，而是 iOS Safari 和多数 WebView（微信、QQ、钉钉内嵌页）压根不进入 :active 的状态计算流程——除非你明确告诉它“这个元素要响应触摸”。浏览器对非语义化元素（比如 div 或 span）默认跳过激活态匹配，哪怕加了 onclick 也不行。
常见误判点：
-
button:active没反应？先检查是否被button:focus:active或更高权重规则覆盖 - 父容器设了
pointer-events: none或overflow: hidden，事件流被截断或反馈区域被裁剪 - 只改
color或border-color，视觉变化太弱，真机强光屏下根本察觉不到
必须加的 HTML 层声明：ontouchstart=""
这是目前最稳定、最轻量、兼容性最好的解法。iOS 从 iOS 12 起就支持，且不依赖 JS 初始化时机，SSR 页面开箱即用。
写法就是直接在目标元素上加空属性：
<div class="btn" ontouchstart="" role="button" tabindex="0">点击我</div>
关键点：
-
ontouchstart=""是 HTML 层面的“触摸意图”声明，浏览器一解析就启用 :active 渲染链路 - 配合
role="button"+tabindex="0"，确保键盘和读屏器也能访问 - 避免全局
document.addEventListener('touchstart', ...)：iOS 15+ 后大量失效，SPA 中还容易漏掉removeEventListener
必配的两条 CSS 规则
仅加 HTML 声明还不够，视觉反馈会被系统层干扰。这两条必须写进按钮选择器里：
-
touch-action: manipulation：禁用双击缩放和 300ms 延迟，让点击立刻触发 :active -
-webkit-tap-highlight-color: transparent：干掉 iOS 默认灰色高亮层，否则你的 :active 样式会被盖住
示例：
.btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active {
transform: scale(0.96);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
:active 样式写法的三个易踩坑点
很多人写了 :active 却看不到效果，问题常出在样式本身：
-
transition必须定义在常态选择器（如.btn）里，不能只写在.btn:active中——否则变化是瞬时的，人眼无法捕捉 - 避免用
background-color做唯一反馈：深色背景+浅色文字时，颜色差值小到不可见；优先用transform: scale()或box-shadow: inset -
:active权重不能低于:hover或:focus，否则样式被覆盖；例如.btn:hover和.btn:active都用了background，但前者权重更高，:active 就不会生效
真正有效的反馈靠的是形变与光影对比，而不是颜色切换。这点在折叠屏、强光环境、深色模式下尤为关键——而这些恰恰是开发者最容易忽略的实机场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
