移动端蓝灰色高亮是iOS Safari等浏览器对元素硬编码的tap highlight反馈，非普通CSS :active样式；应使用-webkit-tap-highlight-color: rgba(0,0,0,0)禁用，并通过JS监听touchstart/touchend模拟可靠点击反馈。
移动端点击链接后蓝灰色高亮是怎么来的
这是 iOS Safari 和部分 Android 浏览器默认给 <a></a> 元素添加的 :active 样式，本质是系统级视觉反馈。它不走 CSS cascade 普通流程，而是浏览器硬编码的 fallback 行为——哪怕你写了 a:active { background: none; }，也可能被忽略。
:active 伪类在移动端经常不生效的三个原因
- iOS Safari 要求元素必须有
cursor: pointer 或绑定触摸事件（如 ontouchstart）才触发 :active
- 某些安卓 WebView（尤其旧版）对
:active 支持极弱，甚至完全跳过
- 如果父容器设置了
touch-action: manipulation 或 -webkit-tap-highlight-color: transparent，:active 可能被提前拦截
真正有效的高亮清除方案：-webkit-tap-highlight-color
cursor: pointer 或绑定触摸事件（如 ontouchstart）才触发 :active
:active 支持极弱，甚至完全跳过touch-action: manipulation 或 -webkit-tap-highlight-color: transparent，:active 可能被提前拦截这不是 CSS 规范标准属性，但它是目前唯一稳定控制点击高亮颜色的手段。重点不是“重置 :active”，而是关掉系统自带的 tap highlight：
/* 全局禁用 */
a, button, input[type="button"], input[type="submit"] {
-webkit-tap-highlight-color: transparent;
}
<p>/<em> 或只针对链接 </em>/
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}注意：transparent 在部分老 iOS 版本中无效，推荐用 rgba(0, 0, 0, 0)；这个属性只在 WebKit 内核生效，Chrome for Android 已逐步弃用，但 iOS 必须靠它。
想保留点击反馈？别碰 :active，改用 JavaScript 模拟
因为 :active 不可靠，实际项目里更稳妥的是监听 touchstart / touchend 手动加 class：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('touchstart', e => {
const target = e.target.closest('a, button');
if (target) target.classList.add('is-pressed');
});
document.addEventListener('touchend', e => {
const target = e.target.closest('a, button');
if (target) target.classList.remove('is-pressed');
});然后写 CSS：.is-pressed { opacity: 0.7; }。这样兼容性好，还能精确控制持续时间、动画节奏，比依赖浏览器行为靠谱得多。
最常被忽略的一点：很多团队只在 a 上处理，却忘了 button、label、带 onclick 的 div 同样会触发 tap highlight——这些元素都得统一加 -webkit-tap-highlight-color 或 JS 模拟。
