-webkit-tap-highlight-color 必须写在可点击的具体元素上才生效，如 .card 或 a、button 等选择器；合法值仅 transparent 和 rgba(0,0,0,0)；outline:none 和 :active 无法替代；需真机测试。
为什么 -webkit-tap-highlight-color 写在 body 上没用
这个覆盖层是 WebKit 内核（iOS Safari、Android Chrome、微信 X5）对“可触发 tap 行为的元素”单独绘制的合成层，不是全局样式。写在 body 或 * 上，浏览器根本不识别——它只响应具体可点击节点的声明。
必须明确匹配目标元素，比如卡片本身是 <div class="card" onclick="..."></div>，就得给它加规则：
.card { -webkit-tap-highlight-color: transparent; }- 或者更稳妥地批量覆盖：
a, button, [onclick], [ontouchstart], [role="button"] { -webkit-tap-highlight-color: transparent; } - Vue/React 动态插入的新卡片节点，得确保 class 名或属性能被上述选择器捕获，否则新节点不生效
-webkit-tap-highlight-color 的合法值只有两个
别写 none、unset、initial，这些全无效；也别写 rgba(255,255,255,0)——虽然能关掉，但语义混乱且多占字节。
只认这两个：
-
transparent（推荐，语义清晰） -
rgba(0, 0, 0, 0)（等价，但不如transparent直观）
其他任何写法，真机上该蓝还是蓝，尤其 iOS Safari 对语法极其严格。
别和 outline: none 搞混，也别指望 :active 覆盖它
outline: none 只影响键盘聚焦时的焦点框，和手指点击的高亮层完全无关；而 :active 是 CSS 状态伪类，生命周期短、渲染层级低，压不住浏览器底层合成的 tap 高亮蒙版。
如果你同时用了 touch-action: manipulation 或监听 touchstart 并 preventDefault()，高亮可能消失——但这不是 CSS 生效了，是事件流被截断导致系统根本没触发 tap 合成，属于副作用，不可靠。
真机测试前最容易漏的三件事
桌面 Chrome 的设备模拟器默认禁用 tap 高亮，开发时完全看不到问题。等部署后用户一碰就蓝，才意识到漏了。
- 必须在 iOS Safari 和 Android Chrome 真机上各测一次，不能只信模拟器
- 旧版 UC、QQ 浏览器对
-webkit-tap-highlight-color支持不全，若需兼容，得加-webkit-user-select: none辅助（但慎用，会禁用长按复制） - 如果卡片里有文本，长按仍会触发
::-webkit-text-selection蓝底白字选中框——那是另一套机制，得单独处理，和 tap 高亮无关
真正难的不是写这行 CSS，而是它只在真实触摸下存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
