-webkit-tap-highlight-color: transparent 仅对可激活元素生效，需精准作用于语义化交互节点并补全 :active 反馈与可访问性支持。
为什么-webkit-tap-highlight-color: transparent写了也不生效
不是 CSS 写错了，是它根本没作用到目标元素上。这个属性只对 WebKit 内核（iOS Safari、微信 X5）中“可激活”的元素起效，比如 <a>、<button>、<input type="button">，或者显式声明了 role="button" 或 tabindex="0" 的 <div>。常见错误包括：
- 写在
body或*上——某些 WebView（如旧版微信 X5）会白屏或卡顿，且子元素不继承 - 值用了
none、unset、rgba(255,255,255,0)——只有transparent或rgba(0,0,0,0)被识别 - 选择器漏掉了 Bootstrap 常用交互类，比如
.btn、[data-bs-toggle]、[data-bs-dismiss] - Vue/React 动态插入的按钮（如
v-if切换出的<button>）未命中选择器，高亮照常出现
Bootstrap 按钮和 Tab 的高亮必须单独处理
.btn 类本身不带 -webkit-tap-highlight-color，所以默认蓝灰块必现；.nav-link 同理。不能只靠全局重置，得精准加到语义化交互节点上：
- 推荐选择器：
button, .btn, a.btn, [role="button"], [data-bs-toggle], [data-bs-dismiss] - Tab 选项卡还要注意：
.nav-tabs .nav-link和.nav-pills .nav-link都得覆盖，否则只改一种类型无效 - 别只写
.nav-link.active——权重不够，必须用.nav-tabs .nav-link.active这类组合选择器，同时覆盖background-color、border-color、color - 移动端点击后内容区空白？检查
.tab-pane是否同时有fade和show类，缺一不可
关掉高亮后，:active 反馈必须补上
-webkit-tap-highlight-color: transparent 关的是系统级图层，:active 是 CSS 状态伪类，两者不互斥但也不替代。关掉高亮后用户点下去毫无视觉响应，极易误操作：
-
:active在 iOS 上有约 300ms 延迟，且持续时间极短，肉眼难察觉，建议用轻量反馈：transform: scale(0.98)比改背景色更稳 - 不要只给
a:active加样式——.btn:active、.nav-link:active同样要写 - 键盘用户依赖
:focus-visible，尤其.nav-link必须同步定义，否则 WCAG 可访问性检测失败 - 如果用了
touch-action: manipulation来消除 300ms 延迟，它和-webkit-tap-highlight-color必须同时加在同一元素上，缺一真机就露馅
真机测试最容易漏掉的三个点
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题：
立即学习“前端免费学习笔记（深入）”；
- 必须在真实设备上测：iOS Safari（尤其 iOS 17+）、Android Chrome for Android 各跑一次；Android Chrome 62+ 已彻底忽略该属性，别指望它在所有安卓机上起效
- 微信 X5 内核对
transparent支持不稳定，可降级为rgba(0,0,0,0.01)试试，但慎用——可能影响表单输入体验 - iOS 15.4+ 即使设了
transparent仍可能残留灰白闪烁，这不是样式失效，而是文本可选行为干扰，需配合-webkit-user-select: none，但若元素内含电话号码等需复制内容，就得拆分包裹
