真正能修改点击高亮颜色的只有-webkit-tap-highlight-color，仅在ios safari和部分旧android webview有效；:active伪类因触发时机、渲染层级与高亮机制完全无关而无效。
不能靠 :active 修改点击高亮颜色，它根本不是同一个东西；真正能改的只有 -webkit-tap-highlight-color，但只在 iOS Safari 和部分旧 Android WebView 有效。
为什么 :active 对点击高亮完全无效
:active 是 CSS 伪类，只在“按下未松开”且元素处于可聚焦状态时短暂触发；而移动端点击高亮是 WebKit 渲染层独立绘制的半透明图层，两者生命周期、触发条件、渲染路径全无交集。
- 写了
a:active { background: red; }却仍有蓝灰遮罩 → 那是-webkit-tap-highlight-color在起作用，不是:active没生效 - iOS Safari 上
:active延迟明显、持续时间极短（常低于 100ms），肉眼几乎不可见 - 如果父容器设了
touch-action: manipulation或-webkit-tap-highlight-color: transparent，:active可能被提前拦截，直接不触发 -
outline: none、border: none、background: transparent全部不影响高亮层 —— 它们和高亮不在同一渲染层级
-webkit-tap-highlight-color 的真实作用范围与取值规则
这个属性只控制「手指接触瞬间叠加在元素上的半透明蒙版」的背景色，不是文字色、边框色或 :active 的背景色。它只对可激活元素生效，且必须写在目标元素自身样式中。
- 合法值仅限：
transparent或rgba(0,0,0,0)（推荐前者；none、unset、initial全部无效） - 必须加在可点击元素上：
a、button、[onclick]、[role="button"]、[tabindex]:not([tabindex="-1"]) - 不能靠继承：写在
body或* {}里基本无效；某些 WebView 下甚至引发重绘异常 - Android Chrome 62+ 已彻底移除对该属性的支持，Firefox 从未支持；它现在几乎只服务于 iOS Safari 和微信 X5 内核
真机测试时高亮还在？检查这几个关键点
写了 -webkit-tap-highlight-color: transparent 却仍有残影或蓝框，大概率不是代码错了，而是环境或元素语义没达标。
- iOS 15.4+ 单独设
transparent可能残留微弱灰白闪烁 → 必须同步加user-select: none抑制文本选择意图引发的重绘 - 自定义按钮（如
<div onclick>）默认不被 Safari 视为可激活元素 → 必须补 <code>role="button"或tabindex="0"，否则样式写了也白写 - 微信 X5 内核要求页面有完整
<meta name="viewport" content="width=device-width, initial-scale=1.0">，且不能含user-scalable=no，否则直接禁用该样式 - Vue/React 动态插入的元素（
v-if、useState切换）不会自动继承父级样式 → 新节点需确保匹配相同选择器，或用 CSS-in-JS 显式注入 - 给语义化按钮加
:active+transform: scale(0.98)或opacity: 0.8，比系统高亮更符合设计语言 - 对
div类按钮，除了-webkit-tap-highlight-color: transparent，还得加cursor: pointer和role="button"，否则屏幕阅读器无法识别 - 如果元素内含需复制的内容（如电话号码），不要整块设
user-select: none→ 改用<span class="copyable">138-xxx-xxxx</span>并单独控制 - 关掉系统高亮后，用户点下去没视觉响应，容易误判是否点中 —— 这个空缺你得亲手补上，不能指望浏览器帮你兜底
更可靠的做法：别依赖高亮，自己做反馈
把交互反馈的控制权从浏览器手里拿回来，比死磕 -webkit-tap-highlight-color 更稳定、更可控、更可访问。
