直接写 -webkit-tap-highlight-color: transparent 即可关闭蓝色点击高亮，但仅对真正可点击元素生效；必须显式作用于 a、button、[onclick] 等节点，值只能是 transparent 或 rgba(0,0,0,0)，且须真机测试验证。
直接写 -webkit-tap-highlight-color: transparent 就能关掉，但只对真正可点击的元素生效，挂错位置、写错值、或没真机验证，90% 的“失效”都出在这三处。
为什么 :active 和 outline: none 完全没用
蓝色高亮不是 CSS 状态，而是 WebKit 内核在手指接触瞬间绘制的一层独立 overlay。它和 :active 的触发时机（按住未松开）、生命周期、渲染路径全不重合；outline 控制的是键盘焦点框，对触控反馈零影响。你写了 a:active { background: none } 却仍有蓝框，说明根本没打中问题靶心。
必须写在可点击元素上，不能靠继承
这个样式不会从 body 或 * 继承，必须显式加到实际承载点击行为的节点上：
-
a、button、input[type="button"]这类语义化标签 - 绑了
onclick或ontouchstart的div、span - 设置了
role="button"或tabindex="0"的容器
推荐选择器：a, button, [onclick], [role="button"], [tabindex]:not([tabindex="-1"]) { -webkit-tap-highlight-color: transparent; }
值只能是 transparent 或 rgba(0,0,0,0)
其他写法全部无效：
-
none、unset、initial—— 浏览器直接忽略 -
rgba(255,255,255,0)虽然能用，但语义不清，且部分旧 iOS 版本识别不稳定 -
-webkit-tap-highlight-color必须带前缀，tap-highlight-color已被 iOS 8+ 彻底废弃
别图省事写 * { -webkit-tap-highlight-color: transparent; }——微信 X5、UC 等 WebView 可能因此白屏或卡顿。
真机测试才是唯一验证方式
Chrome DevTools 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到效果。必须在以下环境实测：
- iOS Safari（尤其注意 iOS 17+ 的微弱灰白闪烁）
- Android Chrome（62+ 已弃用该属性，但部分厂商定制 WebView 仍支持）
- 微信内置浏览器（X5 内核，对
<meta name="viewport">有依赖）
动态插入的按钮（如 Vue 的 v-if、React 的 useState 更新后渲染）不会自动继承父级样式，得确保新节点也匹配上述选择器。最麻烦的从来不是怎么写这行 CSS，而是它只在真实触摸下存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
