必须用 -webkit-tap-highlight-color: transparent，因为该高亮是 WebKit 内核在触摸层单独绘制的系统级叠加图层，完全绕过 CSS 伪类和背景样式，且旧版 iOS 对 rgba(0,0,0,0) 支持不稳定，而 transparent 兼容性更稳。
必须用 -webkit-tap-highlight-color: transparent，写 tap-highlight-color（无前缀）完全无效，且不能只靠 :active 或改 background 解决。
为什么 :active 和 background 都没用
移动端点击后那个一闪而过的灰色蒙版，不是元素自身的背景，也不是 CSS 伪类触发的渲染；它是 WebKit 内核（iOS Safari、微信 X5、QQ 浏览器等）在触摸层单独绘制的叠加图层，完全绕过常规样式流程。你给 a 元素设 background: transparent 或写一堆 a:active { opacity: 0.9; }，对它毫无影响。
-
:active只在“按下未松开”瞬间生效，且依赖用户操作路径（比如滑动离开再松手就不触发） - 这个高亮是系统级反馈，生命周期和触发条件与 CSS 状态无关
- 常见错误：调试时看到高亮还在，就反复调
:active，其实根本不在同一个机制里
该用什么值：transparent 而不是 rgba(0,0,0,0)
虽然两者视觉上一样，但旧版 iOS（尤其是 iOS 12–14）对 rgba() 的 alpha 通道支持不稳定，部分机型会回退到默认灰色遮罩。而 transparent 是被所有支持该属性的 WebKit 内核一致识别的取值，兼容性更稳。
- 不要写
none—— 浏览器会忽略 - 不要写
rgba(0,0,0,0)—— 有小概率残留灰边或失效 - 不要试图用
opacity: 0或visibility: hidden替代 —— 它们不作用于这个蒙版层
哪些元素要加、怎么加才安全
这个属性不可继承，也不能靠 * { -webkit-tap-highlight-color: transparent; } 一劳永逸——那样会让 <input type="checkbox">、<select></select> 等控件失去可访问性反馈，视障用户可能无法感知是否点中了开关。
- 推荐选择器：
a, button, input, textarea, select, [onclick], [role="button"] - 如果用了自定义点击容器（比如
div@click），必须显式加这条规则到该元素上 - 避免在全局
body上加!important—— 某些 WebView 会因此渲染异常，优先用具体选择器+普通权重 - 第三方 UI 库（如 Ant Design Mobile、Vant）可能已重置该属性，检查是否被覆盖
为什么有时加了还是有高亮
失效通常不是语法问题，而是环境干扰：
- 父容器设置了
pointer-events: none，导致 tap 行为未进入高亮流程 - 元素绑定了
touchstart并调用了event.preventDefault()（尤其在用fastclick或手写防抖逻辑时） - CSS 优先级不足，被更高权重的规则（比如 inline style 或带
!important的库样式）覆盖 - 用了
user-select: none却没配-webkit-user-select: none，某些旧版 iOS 会 fallback 到默认高亮策略
真正难处理的，不是“怎么关掉”，而是关掉之后要不要补一个更可控的反馈 —— 比如轻量 :active 背景变化，或结合 @media (hover: none) and (pointer: coarse) 做触控专用态。那个一闪而过的灰色块本身，其实是系统在帮你告诉用户“这儿能点”。强行抹掉，得自己接住这个责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
