-webkit-tap-highlight-color 只对可激活元素生效，需作用于 a、button 等语义元素或带 onclick/ontouchstart 的元素，值必须为 transparent 或 rgba(0,0,0,0)，且需配合 role="button"、tabindex="0" 等确保可点击性。
-webkit-tap-highlight-color 必须作用于可点击元素才生效
这行 CSS 不是全局开关，写在 body 或 * 上基本无效。它只对浏览器认定为“可激活”的元素起作用，比如 a、button、input、textarea，或者带 onclick、ontouchstart 属性的 div。如果你用的是语义化缺失的容器（比如纯 div 绑了 addEventListener('click')），iOS Safari 根本不触发高亮，也就谈不上“移除”——得先加 role="button" 或 tabindex="0" 唤醒它的可点击行为。
- 推荐选择器：
a, button, input, textarea, [onclick], [ontouchstart], .clickable - 避免
* { -webkit-tap-highlight-color: transparent; }，某些 Android WebView 会因此重绘异常 - Vue/React 中动态插入的节点（如
v-if切换后渲染）需确保选择器仍能命中，必要时用::v-deep或提升样式作用域
值必须是 transparent 或 rgba(0,0,0,0)
其他写法全无效：none、unset、initial、rgba(255,255,255,0) 都不被 WebKit 识别。底层逻辑是关掉合成层的蒙版绘制，不是换颜色，所以只有透明通道为 0 的值才起效。虽然 rgba(0,0,0,0) 和 transparent 效果一致，但前者在旧版 UC 浏览器里偶有失效，transparent 更稳妥。
- 别和
outline: none混淆：后者管键盘焦点边框，和点击高亮完全无关 -
:active伪类无法覆盖 tap 高亮，因为它是浏览器底层合成层绘制，生命周期独立 - 设成
rgba(0,0,0,0.1)这类半透明值，依然会显示灰蒙层——alpha 必须严格为 0
真机测试比模拟器重要得多
Chrome DevTools 的设备模拟模式默认关闭 tap 高亮，开发阶段根本看不到问题。等部署到 iOS Safari 或 Android Chrome 真机上，点一下全是蓝灰块，才意识到漏了。尤其要注意：
- iOS Safari 至今只认
-webkit-前缀，标准tap-highlight-color无效 - Android Chrome 70+ 支持无前缀版本，但 62–69 版本已完全忽略该属性，实际效果取决于用户设备版本
- 微信 X5 内核有隐藏规则：必须声明
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则可能直接禁用该样式 - 某些 Hybrid App 的 WebView 内核老旧，即使写了
transparent仍残留微弱灰边，这时得配合outline: none和border: none一并清理
关掉高亮后，用户可能感觉“点不动”
完全移除系统反馈后，视觉上缺乏按下确认感，尤其对触控精度不高的用户。更稳妥的做法是主动接管反馈：
- 用
:active加轻量样式，比如background-color: #eee或transform: scale(0.98) - 确保页面有
<meta name="viewport">，且元素有cursor: pointer或语义角色，否则:active在部分 Android 设备上不触发 - 如果项目要兼容键盘导航，别只依赖视觉反馈——
tabindex="0"和role="button"不仅唤醒 tap 高亮，也保障可访问性
真正麻烦的不是这行 CSS 怎么写，而是它只在真实触摸环境下存在、只对特定内核生效、还和可访问性提示共存。关得太彻底，键盘用户就找不到焦点在哪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
