-webkit-tap-highlight-color: transparent 是唯一能真正关掉 iOS Safari 和微信 X5 点击高亮的写法，因其作用于 WebKit 触摸蒙版层，而 :active 和 outline 无法影响该独立渲染层。
-webkit-tap-highlight-color: transparent 是唯一能真正关掉 iOS Safari 和微信 X5 点击高亮的写法，:active、outline: 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切换后渲染）不会自动命中已有选择器，必须确保新节点也带匹配类或属性
-webkit-tap-highlight-color 的合法值只有两个
其他写法全部被 WebKit 忽略，包括：
立即学习“前端免费学习笔记（深入）”；
-
none、initial、inherit -
rgba(255,255,255,0)虽然视觉等效，但语义不清，部分旧 WebView 不识别 -
color: transparent或background: transparent—— 这俩和 tap 高亮完全无关 - 只认
transparent或rgba(0,0,0,0)
禁用后必须手动补点击反馈
关掉高亮不等于可以不管交互反馈。用户需要明确知道“我点到了”：
- 纯图标按钮、轮播箭头这类无文字区域，建议加
:active { transform: scale(0.98); }，轻量、无重排 - 表单类按钮、菜单项等需键盘导航的控件，不建议全局关闭高亮；应保留
:focus { outline: 2px solid #007aff; }提供可访问性焦点指示 - Android Chrome 62+ 已彻底移除此属性支持，别指望它在所有安卓机上生效；iOS Safari 和微信 X5 仍是主要战场
最麻烦的不是怎么写这行 CSS，而是它只在真实触摸环境下存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
