-webkit-tap-highlight-color: transparent 仅对明确可交互元素生效，需配合 role、tabindex、user-select 等确保语义与行为一致，否则无效。
直接写 -webkit-tap-highlight-color: transparent 就能关掉，但只对可点击元素自身生效，挂错地方、值写错、或没满足可激活条件，就完全没反应。
为什么 -webkit-tap-highlight-color: transparent 没生效
这不是 CSS 写错了，而是浏览器根本不认为那个元素“可点”：
- 元素没声明交互意图：比如
<div onclick="doSomething()">缺少role="button"或tabindex="0"，iOS Safari 会忽略它 - 样式挂错位置：只写了
body { -webkit-tap-highlight-color: transparent; }—— 该属性不继承，子元素不会自动获得 - 值不合法：写成
none、unset、initial全部无效；必须是transparent或rgba(0,0,0,0) - 被第三方样式覆盖：某些 UI 库（如 Ant Design Mobile）用
!important声明了高亮色，你的规则优先级不够
哪些元素必须加这条规则
不能只盯 <a> 和 <button>，只要浏览器认定“这玩意儿能点”，就得显式处理：
-
a、button、input[type="button"]、input[type="submit"] - 带
onclick或ontouchstart的div/span，且必须同步加role="button"和tabindex="0" -
[role="button"]、[tabindex]:not([tabindex="-1"])、[onclick] - 避免用
* { -webkit-tap-highlight-color: transparent; }—— 微信 X5 WebView 可能白屏或破坏<select>焦点
iOS 15.4+ 残影怎么彻底消失
即使写了 -webkit-tap-highlight-color: transparent，iOS 15.4 及以上仍可能闪一下灰白残影。这不是样式失效，而是文本可选行为触发的重绘干扰：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
user-select: none才算真正干净关闭 - 但注意：如果元素内含需复制的内容（如电话号码），不能整块禁用，应把可复制文本用
<span>包裹并单独设user-select: text - 微信 X5 内核还依赖完整
<meta name="viewport">（含user-scalable=no）才认这个样式 - 动态插入的元素（如 Vue 的
v-if、React 的useState切换）若没同步role或tabindex，高亮会重新出现
:active 样式压不住高亮，别白费劲
:active 和 tap 高亮根本不在一个层级：:active 是 CSS 渲染层伪类，而高亮是 WebKit 渲染引擎在合成层画的 overlay，两者生命周期、触发机制、绘制顺序都不同：
- 写了
a:active { background: red; }却仍有蓝灰块 → 说明你还在跟错误对象较劲 - iOS 上
:active延迟明显，肉眼几乎不可见，无法替代系统反馈 - 高亮层会直接盖住背景、边框甚至
box-shadow，outline: none对它完全无效 - 真机测试前最容易漏掉的硬性条件：桌面 Chrome 设备模拟器默认不触发 tap 高亮，开发阶段根本看不到问题
真正麻烦的不是加一行 CSS，而是关掉系统反馈后，你得自己补全视觉响应、语义标记和可访问性支持——尤其是 role、tabindex、:active 和 user-select 这四者的组合，缺一不可。
