应为 -webkit-tap-highlight-color: transparent 仅对真实可点击元素（如 button、a、[role="button"]、[onclick]）生效，且需真机测试；它非 :active 状态，而是 WebKit 独立绘制的 overlay，禁用需权衡可访问性。
直接设 -webkit-tap-highlight-color: transparent，但必须加在具体可点击元素上，否则真机无效。
为什么 :active 完全没用
:active 只在手指按下未松开的极短窗口内生效，且依赖事件路径（比如滑动离开再松手，:active 就不会触发）；而蓝色高亮是 WebKit 内核在 tap 事件后主动绘制的 overlay，生命周期独立于 CSS 状态。你写了 a:active { background: none } 却仍有蓝框，说明问题根本不在这里。
正确写法：只作用于真实可点击元素
- 必须明确匹配可激活元素，例如：
button、a、input、[role="button"]、[onclick] - 推荐写法：
button, a, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; } - 不要写
* { -webkit-tap-highlight-color: transparent; }—— 某些 WebView（如旧版微信 X5）会因此白屏或渲染异常 - 值必须是
transparent或rgba(0,0,0,0)；none、unset无效
真机测试最容易漏掉的三个点
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题：
- 必须在真机 Safari 和 Chrome for Android 上验证 —— 尤其注意 iOS 17+ 和 Android 14 的 WebView 行为差异
- Vue/React 动态插入的元素（如
v-if切换出的按钮）不会自动继承父级样式，需确保它们也匹配上述选择器 - 如果用了
FastClick或touch-action: manipulation，高亮可能消失，但这不是 CSS 生效了，而是底层事件流被拦截，反而掩盖真实问题
兼容性与可访问性不能忽略
-webkit-tap-highlight-color 是 WebKit 私有属性，Android Chrome 62+ 已完全忽略，Firefox 和 Edge 从不支持；它只对 iOS Safari 和微信 X5 内核有效。更关键的是：这个高亮本身是可访问性特性，彻底禁用后，低视力用户可能难以确认点击是否成功。所以别图省事全站关掉，只关那些你已提供明确反馈（如动画、颜色变化、Toast）的交互区域。
立即学习“前端免费学习笔记（深入）”；
