必须用 -webkit-tap-highlight-color: transparent 关闭移动端蓝色高亮，因为它是 WebKit 内核独立绘制的触摸反馈层，:active 和 outline: none 均无效；该属性仅对可点击元素生效，且需真机测试，禁用时须兼顾可访问性。
移动端点击链接出现蓝色高亮，不是样式写错了，而是 WebKit 内核（iOS Safari、微信 X5、旧版 Android Chrome）的默认触摸反馈层在起作用；必须用 -webkit-tap-highlight-color: transparent 关闭，:active 或 outline: none 完全无效。
为什么 :active 和 outline 都没用
蓝色高亮是浏览器底层合成层绘制的独立 overlay，和 CSS 伪类生命周期完全分离：:active 只在手指按下未松开的极短窗口内触发，且依赖事件路径（比如滑动离开再松手就压根不触发）；而 tap 高亮在 touchstart 瞬间就渲染，持续到 touchend 后一小段时间。它也不走 outline 流程——哪怕你写了 outline: none，高亮照常出现。
常见错误现象包括：
-
a:active { background: transparent; }在 iOS Safari 上基本不生效 -
input:focus { outline: none; }只影响键盘焦点框，对触控高亮零作用 - 某些安卓 WebView 甚至会忽略
:active，连压感样式都出不来
-webkit-tap-highlight-color 必须写在可点击元素上才生效
这个属性不是全局开关，挂错位置等于没写。它只对真实触发 tap 行为的元素起作用，比如 <a></a>、<button></button>、带 onclick 或 ontouchstart 的 <div>，或明确声明 <code>role="button" 的容器。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
button, a, [role="button"], [onclick] {
-webkit-tap-highlight-color: transparent;
}务必避免：
- 写
* { -webkit-tap-highlight-color: transparent; }—— 某些 WebView（如旧版微信 X5）会因此白屏或卡顿 - 写在
body或父容器上，子元素不会继承 - 值写成
none、unset、initial—— 这些被完全忽略
真机测试最容易漏掉的三个点
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题。必须在真实设备上验证：
- iOS Safari（尤其 iOS 17+）和 Android Chrome for Android 各测一次；Android Chrome 62+ 已彻底移除对该属性的支持，别指望它在所有安卓机上起效
- Vue/React 动态插入的元素（如
v-if切换出的按钮、useState更新后渲染的<div onclick>）不会自动继承父级样式，需确保它们也匹配上述选择器<li>如果用了 <code>FastClick或touch-action: manipulation，高亮可能消失——但这不是 CSS 生效了，而是事件流被拦截，反而掩盖真实问题 - 已有
:active背景色变化或缩放动画的按钮 - 点击后弹出 Toast 或触发状态切换的交互区
- 自定义 icon 按钮等无语义但强视觉反馈的组件
禁用后要注意可访问性反馈是否缺失
-webkit-tap-highlight-color 是 WebKit 私有属性，只对 iOS Safari 和微信 X5 内核有效；Firefox、Edge、现代 Chromium 均不支持。更关键的是：这个高亮本身是可访问性特性，彻底禁用后，低视力用户或键盘导航者可能难以确认操作是否成功。
所以不要图省事全站关掉。只关那些你已提供明确替代反馈的区域，比如：
保留原生表单控件（如 <input type="checkbox">、<select></select>）的高亮，否则用户会失去点击确认感。真正麻烦的不是怎么写这行 CSS，而是它只在真实触摸环境下存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
