-webkit-tap-highlight-color 必须作用于可点击元素（如a、button、带onclick/ontouchstart的div）才生效，写在body或*上无效；值仅支持transparent或rgba(0,0,0,0)，需真机测试iOS Safari和Android Chrome。
-webkit-tap-highlight-color 必须写在可点击元素上才生效
这个属性不是全局开关，挂错位置就等于没写。它只对真实触发 tap 行为的元素起作用，比如 <a>、<button>、带 onclick 或 ontouchstart 的 <div>。很多人把 -webkit-tap-highlight-color: transparent; 写在 body 或 * 上，结果真机一点照旧蓝灰一片。
- 正确做法：针对具体交互元素写选择器，例如
a, button, [onclick], .js-clickable - 避免写
* { -webkit-tap-highlight-color: transparent; }—— 某些 Android WebView 会因此重绘异常或卡顿 - Vue/React 中动态插入的元素（如
v-if切换、useState更新后渲染）不会自动继承父级样式，得确保新节点也匹配到该规则
值必须是 transparent 或 rgba(0,0,0,0)，其他写法无效
none、unset、initial 都不被识别；rgba(255,255,255,0) 虽然能用，但语义不清且多占字节。WebKit 只认透明通道为 0 的颜色值，本质是“关掉蒙版层”，不是“换种颜色”。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
-webkit-tap-highlight-color: transparent; - 不要和
outline: none混为一谈：后者管键盘聚焦边框，前者管手指按下瞬间的系统级反馈，两者完全独立 - 如果同时用了
FastClick或touch-action: manipulation，高亮可能消失——但这不代表 CSS 生效了，而是事件机制被绕过了
真机测试前必须确认 Safari 和 Chrome for Android 都已启用该样式
桌面 Chrome 的“设备模拟”默认关闭 tap 高亮，开发时根本看不到问题。等部署到 iOS 真机，点一下全是蓝灰块，才意识到漏了。
- 务必在 iOS Safari 和 Android Chrome 上各测一次，尤其注意旧版 UC、QQ 浏览器是否仍残留高亮（它们对
-webkit-tap-highlight-color支持不全） - 某些 Hybrid App 的 WebView 内核版本老旧，可能需要加
-webkit-user-select: none;辅助压制（但慎用，会影响长按复制等行为） - 如果元素本身有
:active样式，别指望它能覆盖 tap 高亮——:active是 CSS 状态伪类，而 tap 高亮是浏览器底层合成层绘制，生命周期完全不同
真正麻烦的不是怎么写这行 CSS，而是它只在真实触摸环境下存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
