-webkit-tap-highlight-color: transparent 仅对 WebKit 内核浏览器（如 iOS Safari、微信 X5）中显式声明的可激活元素生效，Android Chrome 62+ 及 Firefox 完全不支持；必须作用于 a、button 或带 role="button"/tabindex="0" 的元素，不可继承，且需配合 user-select: none 消除 iOS 15.4+ 残影。
-webkit-tap-highlight-color: transparent 能关掉 iOS Safari 和部分旧 Android 的点击高亮，但仅对可点击元素自身生效，且在 Android Chrome 62+、Firefox 中完全无效。
为什么直接写 -webkit-tap-highlight-color: transparent 没反应
这不是代码写错，而是浏览器行为和作用域限制导致的：
- 该属性只在 WebKit 内核浏览器中生效（iOS Safari、微信内置浏览器等），Android Chrome 62+ 已彻底移除支持，写了也白写
- 它不继承，不能靠
body或* {}全局设置——必须加在触发点击的元素上，比如a、button、带onclick的div - 值必须是
transparent或rgba(0,0,0,0)；写成none、unset、initial都无效 - 非语义元素（如
div）需同时满足：role="button"+tabindex="0"+ 绑定事件，否则 Safari 根本不识别为可点击目标
哪些元素必须显式设置 -webkit-tap-highlight-color
这个属性只对“可激活元素”起作用，不是所有带交互逻辑的节点都自动命中：
- 原生语义元素：
a、button、input[type="button"]、input[type="submit"]、select - 自定义按钮类元素：必须带
role="button"或tabindex="0"（注意不能是tabindex="-1"），且监听了click或touchstart - 动态渲染组件（如 Vue 的
v-if、React 的useState）中新插入的节点，若 class 或 role 未同步，高亮会重新出现
推荐统一收口写法：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] { -webkit-tap-highlight-color: transparent; }
立即学习“前端免费学习笔记（深入）”；
为什么设了 transparent 还有灰白残影
在 iOS 15.4+ 上，单独设 -webkit-tap-highlight-color: transparent 可能残留微弱闪烁。这不是样式失效，而是系统默认的文本可选行为引发的重绘干扰：
- 必须配合
user-select: none才能真正“干净”隐藏 - 但要注意：如果元素内含需复制的内容（如电话号码、地址），不能整块禁用，应改用包裹可选文本的方式隔离
-
:active伪类无法替代它——两者触发机制完全不同：:active依赖 CSS 状态，而 tap 高亮是 WebKit 渲染层独立叠加的图层 - 别试图用
outline: none或border: none消除它，它们和高亮层完全无关
最易被忽略的一点：微信 X5 内核要求 <meta name="viewport"> 必须包含 user-scalable=no 才可能启用该样式，缺一个字段就失效。
