直接写 -webkit-tap-highlight-color: transparent 能关掉 iOS Safari 的点击高亮，但 Android Chrome 62+ 已完全忽略；它仅对可激活元素（如 a、button、带 role="button" 或 tabindex="0" 的 div）的常态样式生效，值必须为 transparent 或 rgba(0,0,0,0)，且需配合 user-select: none 防 iOS 15.4+ 残留闪烁。
直接写 -webkit-tap-highlight-color: transparent 能关掉 iOS Safari 的点击高亮边框，但 Android Chrome 62+ 已完全忽略它；真机上失效，大概率不是你写错了，而是挂错位置、值不合法，或元素根本不被识别为可点击目标。
为什么 -webkit-tap-highlight-color 常常没效果
这个属性只在 WebKit 内核（如 iOS Safari、微信 X5）中生效，且有强触发条件：
- 必须作用于可激活元素：比如
<a></a>、<button></button>、<input type="button">；纯<div onclick> 默认不算，得加 <code>role="button"或tabindex="0" - 不能写在伪类里（如
a:active），必须是元素的常态样式声明 - 值只能是
transparent或rgba(0,0,0,0)；写成none、unset、initial都无效 - 某些 iOS 版本（如 15.4+）即使设了
transparent，仍可能残留灰白闪烁——这是文本可选行为引发的重绘，需配合user-select: none - 语义化交互元素：
a、button、input[type="button"]、input[type="submit"]、label - 自定义交互容器：对绑了
onclick或ontouchstart的<div class="card">，需同时加 <code>role="button"和tabindex="0"，再配-webkit-tap-highlight-color: transparent - 推荐选择器写法：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] - 避免用
* { -webkit-tap-highlight-color: transparent }：部分 WebView 会异常，且影响表单控件（如<select></select>）的可访问性反馈 - 开发阶段在 PC 上调试时，
-webkit-tap-highlight-color不会触发——它只在真实触摸设备上生效 - Vue/React 动态渲染的按钮（比如
v-if或useState切换出来的）如果没复用父级样式或 class，高亮会重新出现 - 用了 FastClick 或类似库时，高亮“消失”不是因为 CSS 生效了，而是事件机制被绕过；此时若要自定义反馈，得改用
pointerdown/pointerup监听
哪些元素上必须显式设置该样式
它不会继承，也不能用 CSS 变量控制，必须逐个匹配目标元素：
真机测试时最容易漏掉的三个点
桌面 Chrome 模拟器根本看不到问题，等上真机才发现满屏蓝灰块：
立即学习“前端免费学习笔记（深入）”；
真正难处理的是混合场景：一个 <div> 同时绑了 <code>click、touchstart 和 gesture，又用了第三方轮播组件——这时候高亮可能被多次拦截或延迟触发，得逐层排查事件流和样式作用域。iOS 15.4+ 的残影问题尤其容易被当成“CSS 没生效”，其实只是 user-select 没同步关掉。
