-webkit-tap-highlight-color 控制的是ios safari等webkit浏览器中点击时覆盖元素的半透明高亮层背景色，非文字或边框颜色；仅对可交互元素生效，设为transparent并配合user-select: none才能彻底隐藏。
移动端点击高亮颜色不是用 -webkit-tap-highlight-color 控制“颜色”本身
这个属性实际控制的是点击时覆盖在元素上的半透明高亮层（overlay）的背景色，**不是文字或边框颜色**。它只在 iOS Safari 和部分 Android WebKit 内核浏览器中生效，Chrome for Android 从 58+ 开始已移除支持，所以现在主要影响 iOS 用户。
常见误解是把它当作文本选中色或按钮激活态，但它的作用域非常窄：仅限于用户手指按下瞬间、且元素可交互（如 <a></a>、<button></button>、onclick 元素）时的视觉反馈。
- 设为
transparent可彻底隐藏高亮（最常用） - 设为带 alpha 的颜色（如
rgba(0, 128, 255, 0.3)）能自定义高亮色调和透明度 - 设为不透明色（如
#ff0000）会导致高亮层完全遮盖内容，体验极差 - 该样式必须加在触发点击的元素上，父容器设置无效
-webkit-tap-highlight-color 必须配合 user-select: none 才能真正“干净”隐藏
单独设 -webkit-tap-highlight-color: transparent 在某些 iOS 版本（尤其是 iOS 15.4+）仍可能残留微弱灰白闪烁。这是因为高亮层被清除了，但系统默认的文字可选行为会触发轻微重绘。
实操建议统一处理：
a,
button,
[onclick],
[role="button"] {
-webkit-tap-highlight-color: transparent;
user-select: none;
}
-
user-select: none阻止了点击过程中的文本选择意图，消除残影 - 注意：如果元素内有需要复制的文本（如电话号码），不要对整个元素设
user-select: none，改用包裹内联元素并单独控制 - 不需要加
-moz-或-ms-前缀，它们对该属性无意义
替代方案比依赖 -webkit-tap-highlight-color 更可靠
由于兼容性差、行为不稳定，现代项目更推荐用伪类模拟点击反馈：
- 对
<button></button>或带role="button"的元素，用:active+transition实现压感效果 - 避免在
:active中仅改颜色——移动端:active状态持续时间极短，肉眼难察觉；建议搭配transform: scale(0.98)或背景渐变 - 如果需兼容老 iOS，仍保留
-webkit-tap-highlight-color: transparent，但不把它当作主要交互反馈手段 - 使用
pointer-events: none临时禁用点击反馈？不行——这会直接禁用事件，不可取
为什么你设了 -webkit-tap-highlight-color 却没效果？
最常见原因是元素没有触发点击行为的“资格”。该属性只对以下情况生效：
- 元素有
href属性（<a href="#"></a>） - 元素有
onclick、onmousedown等事件监听器 - 元素有
role="button"或tabindex="0"且绑定事件 - 元素是原生表单控件（
<button></button>,<input type="button">）
比如给一个纯 <div> 设了该样式但没加任何交互逻辑，iOS 下根本不会触发高亮，自然也看不到效果。别浪费 CSS 在这里。
<p>真正容易被忽略的是：这个属性无法通过 JavaScript 动态设置生效（<code>element.style.webkitTapHighlightColor = 'transparent' 无效），只能走 CSS 规则。
