-webkit-tap-highlight-color: transparent 是唯一能真正禁用 iOS Safari 和微信 X5 点击高亮的 CSS 属性，仅对可点击元素自身生效，需配合手动反馈与可访问性设计。
-webkit-tap-highlight-color: transparent 是唯一能真正关掉 iOS Safari 和微信 X5 等 WebKit 内核浏览器点击高亮的手段，:active、outline: none、user-select: none 全部无效——它们压根不作用于同一层。
为什么 :active 和 outline 都没用
蓝色高亮是 WebKit 渲染引擎在 touchstart 瞬间直接绘制的一层独立蒙版，盖在所有 CSS 样式之上。它和 DOM 事件生命周期无关，也不走伪类或焦点流：
-
a:active { background: red }只在手指按住未松开时极短窗口内生效，且滑动离开就中断；高亮却从触碰开始就出现，持续到touchend后一小段时间 -
input:focus { outline: none }只影响键盘 Tab 或 JS.focus()触发的轮廓，对手指点击零作用 - 桌面 Chrome 的设备模拟器默认不触发该高亮，开发阶段完全看不到问题，真机一试才暴露
必须写在目标元素上，不能靠父级兜底
这个属性不继承、不全局生效，只对「当前元素自身」起效，且仅限被浏览器识别为“可点击”的节点：
- 正确写法：
a, button, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; } - 错误写法：
* { -webkit-tap-highlight-color: transparent; }—— 微信 X5 WebView 可能白屏或卡顿 - 错误写法：
body { -webkit-tap-highlight-color: transparent; }—— 子元素如<div onclick>完全不受影响 - Vue/React 动态插入的按钮（如
v-if切换后渲染）不会自动命中已有选择器，必须确保新节点也带匹配类或属性
值只认 transparent 或 rgba(0,0,0,0)
其他写法全部被 WebKit 忽略，包括：
立即学习“前端免费学习笔记（深入）”；
-
none、unset、initial、inherit -
rgba(255,255,255,0)虽然视觉等效，但语义不清，部分旧 WebView 不识别 -
color: transparent或background: transparent—— 这俩和 tap 高亮完全无关
注意：Android Chrome 62+ 已彻底移除此属性支持，别指望它在所有安卓机上生效；iOS Safari 和微信 X5 仍是主要战场。
禁用后必须手动补点击反馈
关掉高亮不等于可以不管交互反馈。用户需要明确知道“我点到了”：
- 纯图标按钮、轮播箭头这类无文字区域，建议加
:active { transform: scale(0.98); }，轻量、无重排 - 表单类按钮、菜单项等需键盘导航的控件，不建议全局关闭高亮；应保留
:focus { outline: 2px solid #007aff; }提供可访问性焦点指示 - 如果用了
touch-action: manipulation或 FastClick，高亮可能消失——但这不是 CSS 生效了，而是事件流被拦截，掩盖了真实问题
真正麻烦的不是怎么写这行 CSS，而是它只在真实触摸环境下存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
