-webkit-tap-highlight-color: transparent 仅对 webkit 内核生效，需显式作用于可激活元素（如 a、button、role="button"[tabindex="0"]），不继承、不支持伪类、非 transparent/rgba(0,0,0,0) 值无效，android chrome 62+ 已忽略。
-webkit-tap-highlight-color: transparent 能关掉 iOS Safari 和微信 X5 的点击高亮，但 Android Chrome 62+ 已彻底忽略它，写了也白写；真机测不出效果，大概率不是代码错，而是浏览器不支持、元素没匹配上，或者压根没在真机上跑。
为什么 -webkit-tap-highlight-color 常常没反应
这个属性只对 WebKit 内核生效（iOS Safari、微信 X5、旧版 QQ 浏览器），且有硬性限制：
-
-webkit-tap-highlight-color不继承，body或*上设了，子元素不会自动获得 - 值必须是
transparent或rgba(0,0,0,0)；写成none、unset、rgba(255,255,255,0)都无效 - 不能写在伪类里，比如
a:active { -webkit-tap-highlight-color: transparent; }是废的 - 桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题
哪些元素必须显式加该样式
它只对“可激活元素”自身生效，不是所有带 onclick 的 div 都自动命中。必须确保目标节点满足以下任一条件：
- 原生语义元素：
a、button、input[type="button"]、input[type="submit"] - 自定义按钮：同时带
role="button"和tabindex="0"，且绑定了click或touchstart - 动态渲染节点（如 Vue 的
v-if、React 的useState切换）若没同步role或tabindex，高亮会重新出现
推荐统一写法：a, button, input[type="button"], input[type="submit"], [role="button"][tabindex="0"], [onclick]
iOS 15.4+ 还有灰白残影怎么办
单独设 -webkit-tap-highlight-color: transparent 在较新 iOS 上仍可能残留微弱闪烁——这不是高亮没关掉，而是系统默认的文本可选行为触发了重绘干扰。
- 必须配合
user-select: none才算真正干净 - 但如果元素内含需复制的内容（如电话号码、地址），不能整块禁用，应把可选文本用
<span class="selectable"></span>包裹，再对.selectable单独设user-select: text - 某些 Hybrid App 的 WebView 内核老旧，即使写了
transparent仍残留微弱灰边，这时得一并清理outline: none和border: none
关掉高亮后用户点下去没反馈怎么办
-webkit-tap-highlight-color 是系统级视觉反馈，关掉后你得自己补上，否则用户容易误判是否点中：
-
:active伪类无法替代它——两者触发机制完全不同，:active在 iOS 上延迟明显、持续时间极短，肉眼几乎不可见 - 推荐用轻量反馈：比如
transform: scale(0.98)，比改背景色更少重排 - 如果用
div模拟按钮，除了关高亮，还得加cursor: pointer和role="button"，否则屏幕阅读器可能忽略
真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问——尤其当元素既需要触控反馈，又要支持键盘导航时，:focus 和 :active 得分开设计，不能混为一谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
