-webkit-tap-highlight-color: transparent 仅对 webkit 内核（如 ios safari、微信 x5）生效，需作用于可激活元素（a/button/role="button"等），值必须为 transparent 或 rgba(0,0,0,0)，不继承且不能写在伪类中，android chrome 62+ 已完全忽略。
-webkit-tap-highlight-color: transparent 能关掉 iOS Safari 和微信 X5 的蓝色/灰白高亮，但 Android Chrome 62+ 已彻底无视它；真机上无效，大概率不是你写错了，而是元素不被识别、值不合法，或根本没在目标元素上声明。
为什么写了 -webkit-tap-highlight-color: transparent 还有高亮
这个属性只对 WebKit 内核（iOS Safari、微信、QQ 浏览器等）生效，且有强约束：
- 必须作用于可激活元素：
a、button、input[type="button"]等语义化标签，或显式加了role="button"和tabindex="0"的div - 不能写在伪类里（如
a:active），必须是元素的常态样式 - 值只能是
transparent或rgba(0,0,0,0)；写成none、unset、空字符串都无效 - 不继承，父级设了
body { -webkit-tap-highlight-color: transparent; }对子元素完全没用
哪些元素必须单独加该样式
它不会自动覆盖所有交互节点，必须显式匹配。推荐用这个选择器组合：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] {
-webkit-tap-highlight-color: transparent;
}
- 避免用
* { -webkit-tap-highlight-color: transparent; }：部分 WebView 会异常，还可能破坏select、textarea的可访问性反馈 - 动态插入的元素（如 Vue 的
v-if、React 的条件渲染）需确保新节点也命中该规则，否则漏掉就仍有高亮 - 如果用了
[onclick]选择器，注意它不匹配通过 JS 绑定的事件（如element.addEventListener('click', ...)）
为什么 :active 样式压不住高亮
:active 和 -webkit-tap-highlight-color 是两套机制：
-
:active是 CSS 伪类，仅在“按下未松开”瞬间触发，iOS 上延迟约 300ms，且滑动离开就中断 -
-webkit-tap-highlight-color是 WebKit 渲染层的独立图层，会直接盖在所有样式之上（包括background、box-shadow） - 常见错误：给
a:active设了background，但点击后还是看到蓝灰块——那正是高亮层在起作用 - 禁用高亮后，必须手动补
:active反馈，推荐用transform: scale(0.98)，比改背景更轻量、无重排
iOS 15.4+ 残留闪烁怎么彻底清掉
即使设了 transparent，某些 iOS 版本仍会闪一下灰白——这不是高亮没关掉，而是文本可选行为触发的重绘：
- 必须配合
user-select: none才能真正干净 - 但要注意：如果元素内有需要复制的文本（如电话号码、地址），不能整块设
user-select: none，应把可复制内容用span包裹并单独设user-select: text - 微信 X5 内核还依赖
<meta name="viewport">中包含user-scalable=no才可能启用该样式，缺字段会失效
最易被忽略的是：桌面 Chrome 模拟器根本看不到问题，等真机测试才发现满屏蓝灰块；而 Android Chrome 62+ 以上已完全移除支持，写了等于白写——别把它当跨平台方案，只当 iOS 补丁用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
