-webkit-tap-highlight-color: transparent仅在WebKit内核（iOS Safari、微信X5）生效，且需满足可激活元素、常态样式、合法值（transparent或rgba(0,0,0,0)）、完整viewport配置四条件；Android Chrome 62+已彻底忽略，桌面模拟器不触发，真机测试才暴露问题。
为什么-webkit-tap-highlight-color: transparent写了却还有蓝灰块
不是你漏写了，是它根本没生效——这个属性只在 WebKit 内核（iOS Safari、微信 X5）上起作用，且必须满足四个硬性条件：元素得是可激活的、样式得写在常态下、值必须合法、viewport 得配齐。Android Chrome 62+ 完全忽略它，桌面 Chrome 模拟器也压根不触发，真机一测才露馅。
-
-webkit-tap-highlight-color只对a、button、input[type="button"]等语义化元素或显式声明role="button"+tabindex="0"的容器生效；纯div绑了onclick默认不进激活流程 - 不能写在
a:active这类伪类里，必须是元素的常态样式（比如直接写a { -webkit-tap-highlight-color: transparent; }） - 值只能是
transparent或rgba(0,0,0,0)；写成none、unset、#000全部失效 - 该属性不继承，
body { -webkit-tap-highlight-color: transparent; }对子元素完全无效
哪些选择器必须显式命中才能覆盖高亮
别用 * { -webkit-tap-highlight-color: transparent; }——部分 WebView 会白屏，还破坏 select 和 textarea 的可访问性反馈。微信 X5 内核甚至会因此拒绝渲染焦点框。
- 推荐组合选择器：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] - 自定义交互容器（如
<div class="card" onclick="..."></div>）必须同时加role="button"和tabindex="0"，再套上上述选择器 - 动态渲染的节点（Vue 的
v-if、React 的useState切换）若没复用 class 或 role，高亮会重新出现——得确保新 DOM 节点也匹配该规则 - UI 框架（Vant、Ionic）自带重置样式，你的规则要后加载，或加
!important（仅限兜底）
iOS 15.4+ 残影怎么彻底消失
设了 transparent 还有微弱灰白闪烁？这不是样式失效，而是 iOS 15.4+ 中文本可选行为触发的重绘干扰，得靠 user-select: none 配合才能“干净”关掉。
-
user-select: none必须和-webkit-tap-highlight-color: transparent同时作用于同一元素 - 但要注意：如果元素内含需复制的内容（如电话号码、地址），不能整块禁用；应把可选文本用
<span>包裹，单独设user-select: auto - 微信 X5 内核还有隐藏依赖：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">缺一不可，漏掉就直接忽略该样式
Android Chrome 上高亮没消失怎么办
别挣扎了——-webkit-tap-highlight-color 在 Android Chrome 62+ 已被彻底移除，所有相关 CSS 都无效。这时候靠 CSS 已经救不了，得换思路。
立即学习“前端免费学习笔记（深入）”；
- 优先用
:active主动接管点击反馈：确保元素有cursor: pointer或语义化标签，并配合background-color、transform: scale()等做视觉变化 - 注意
:active在 iOS 上延迟明显、持续极短，肉眼几乎不可见，不能当唯一反馈；建议叠加pointerdown/pointerupJS 监听做更稳的态切换 - 若必须拦截原生高亮（极端场景），可用
touchstart+event.preventDefault()，但会破坏滚动——慎用，且仅限非滚动区域
真机测试前最容易漏掉的是三件事：viewport 缺 user-scalable=no、动态节点没同步 role 和 tabindex、以及以为 :active 能盖过高亮——其实它俩根本不在一个渲染层。
