直接写 -webkit-tap-highlight-color: transparent 可禁用 ios safari 和微信 x5 的点击高亮，但仅对 a、button、input[type="button"] 等可激活元素生效，且必须显式作用于目标元素本身，不可继承或通过父容器、伪类、通配符设置。
直接写 -webkit-tap-highlight-color: transparent 就能禁用 iOS Safari 和微信 X5 内核的点击高亮，但只对可激活元素生效，且必须写在目标元素上——写在父容器、伪类里或全局通配符中基本无效。
为什么 :active 和 outline: none 完全没用
蓝色/灰色高亮是 WebKit 渲染层独立绘制的 overlay，和 CSS 状态无关：:active 只在手指按住未松开的极短窗口内触发，且易被滑动中断；outline 控制的是键盘焦点框，对触控反馈零影响。你写了 a:active { background: transparent } 却仍有蓝框，说明问题根本不在这里。
哪些元素上必须显式加 -webkit-tap-highlight-color: transparent
该属性不继承、不可变量化，必须逐个作用于实际承载点击行为的元素：
-
a、button、input[type="button"]、input[type="submit"]这类语义化可点击元素，直接加即可 - 自定义交互容器（如
<div class="card" onclick="...">）必须同时满足三个条件：<code>role="button"+tabindex="0"+-webkit-tap-highlight-color: transparent - 推荐组合选择器：
a, button, input[type="button"], [role="button"], [tabindex="0"] - 避免
* { -webkit-tap-highlight-color: transparent }—— 微信 X5 等 WebView 可能白屏或重绘异常 - 页面必须含完整
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则微信 X5 可能直接忽略该样式 - 值只能是
transparent或rgba(0,0,0,0)；none、unset、initial全部无效 - iOS 15.4+ 可能残留灰白闪烁，需额外加
user-select: none消除文本选择意图引发的重绘 - Vue/React 动态插入的按钮（如
v-if或useState切换出的）不会自动继承样式，必须确保role和class同步存在
真机测试前必须检查的四个隐藏条件
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题：
Android Chrome 62+ 和 Firefox 根本不支持这个属性
写了等于白写。它只在 iOS Safari、微信 X5、QQ 浏览器等 WebKit 内核环境中有效。如果你的目标环境包含大量 Android 用户，别指望靠这个实现跨平台一致效果。更稳妥的做法是：放弃“消灭高亮”，转而用 :focus-visible 或 @media (hover: none) and (pointer: coarse) 主动控制点击反馈样式——毕竟那个一闪而过的蓝框，本质是系统级可访问性提示，不是 bug。
