必须用 -webkit-tap-highlight-color: transparent 或 rgba(0,0,0,0) 关闭，因蓝色高亮是 webkit 系统级触摸反馈图层，与 :active 伪类和 outline 属性完全无关，二者生命周期、触发机制及渲染路径均不重合。
移动端点击链接出现蓝色高亮，不是 bug，是 WebKit 内核（iOS Safari、微信 X5、旧版 Android Chrome）的默认行为，必须用 -webkit-tap-highlight-color 控制，:active 或 outline: none 都无效。
为什么 :active 和 outline 完全没用
蓝色高亮是系统级触摸反馈图层，和 CSS 伪类生命周期完全分离：:active 只在“按住未松开”且元素可聚焦时短暂触发，而 tap 高亮在手指接触瞬间就渲染，持续到 touchend 后一小段时间。它也不走 outline 流程——哪怕你写了 outline: none，高亮照常出现。
-
a:active { background: transparent; }在 iOS Safari 上基本不生效 -
input:focus { outline: none; }只影响键盘焦点框，对触控高亮零作用 - 某些安卓 WebView 甚至会忽略
:active，连压感样式都出不来
怎么正确设置 -webkit-tap-highlight-color
这个属性只对 WebKit 内核生效，值必须是透明色，且必须写在**实际承载点击行为的元素上**，不能靠继承或全局通配符兜底。
- 推荐写法：
-webkit-tap-highlight-color: transparent;或-webkit-tap-highlight-color: rgba(0, 0, 0, 0);（后者在极个别老 iOS 版本更稳） - 禁止写成
none、unset、initial—— 这些值被忽略，高亮照旧 - 不要写
* { -webkit-tap-highlight-color: transparent; }，部分 WebView 会因此渲染异常或卡顿 - 目标选择器建议明确：例如
a, button, [onclick], [role="button"]
为什么有时设了还是有高亮或残影
常见失效场景不是代码写错，而是元素没满足“可激活”条件，或浏览器内核做了额外限制。
- iOS Safari 对非语义元素（比如纯
div绑了onclick）默认不触发高亮，也就谈不上“关闭”——得加role="button"或tabindex="0"才让它进激活流程 - 微信 X5 内核要求
<meta name="viewport">存在且不含user-scalable=no，否则直接禁用该样式 - iOS 15.4+ 中即使设了
transparent，仍可能残留微弱灰白闪烁——此时需配合user-select: none消除文本选择意图引发的重绘 - Android Chrome 62+ 已彻底移除对该属性的支持，所以别指望它在所有安卓机上起效
更靠谱的替代思路：主动接管点击反馈
依赖 -webkit-tap-highlight-color 是被动防御，现代项目应转向主动控制交互态，兼容性更好、体验更可控。
- 给按钮类元素加
cursor: pointer和touch-action: manipulation，提升:active触发率 - 用
&:active { opacity: 0.85; transform: scale(0.98); }做视觉反馈，比系统高亮更贴合设计语言 - 避免在
:active里只改背景色——移动端状态持续太短，人眼难察觉；加点微动效才有效 - 如果必须兼容老 iOS，保留
-webkit-tap-highlight-color: transparent，但别把它当作唯一方案
真正麻烦的从来不是加一行 CSS，而是搞清它在哪生效、为什么失效、以及失效后有没有退路——这些边界条件，才是真正在线上环境咬人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
