直接写 -webkit-tap-highlight-color: transparent 不能可靠关闭 ios safari 点击高亮，因其不继承、仅对可交互元素生效，且旧版 ios 对 transparent 解析异常，须配合 rgba(0,0,0,0) 及语义化标记（如 role="button" 或 tabindex="0"）才能生效。
直接写 -webkit-tap-highlight-color: transparent 就能关掉 iOS Safari 的点击高亮，但只对可点击元素自身生效，挂错位置或值写错就白配。
为什么写了 -webkit-tap-highlight-color: transparent 还有蓝灰块？
不是浏览器不认，是它根本没作用到目标元素上：
- 只写在
body或*里 —— 这个属性不继承，子元素不会自动获得 - 目标元素没被选中：比如给
div加了onclick，但没加role="button"或tabindex="0"，Safari 默认不把它当可激活元素，样式写了也无效 - 值写错了：
none、unset、空字符串全都不生效；rgba(0,0,0,0)在部分旧 iOS 上会退化成黑色块 - 微信 X5 内核需要配合
<meta name="viewport" content="...">才可能生效，单独写 CSS 不够
哪些元素必须显式设置 -webkit-tap-highlight-color？
只对语义化或明确可聚焦的元素起作用，别乱撒在所有 div 上：
-
a（带href）、button、input[type="button"]、input[type="submit"] - 自定义按钮：必须带
role="button"或tabindex="0"，否则不触发高亮也不响应样式 - 动态插入的元素（如 Vue 的
v-if切换、React 的useState渲染）—— class 或role必须同步带上，否则高亮复现 - 避免用
* { -webkit-tap-highlight-color: transparent; }，某些 WebView 下会导致表单输入异常或重绘卡顿
禁用后为什么感觉“点不动”？
-webkit-tap-highlight-color 只是移除系统层的覆盖色块，不提供任何替代反馈。用户失去视觉确认，就会怀疑没点上：
-
:active不能当替补：它在 iOS 上延迟明显、持续时间极短，肉眼几乎不可见，且滑动松手就不触发 - 推荐用
transform: scale(0.98)+transition做压感反馈，比改背景色更轻量、更可靠 - 如果用了 FastClick 或启用了
touch-action: manipulation，:active可能被抑制，得靠 JS 添加临时 class 来模拟 - 别忘了
user-select: none—— iOS 15.4+ 单设transparent仍有残影，这是文本可选行为引发的重绘干扰
要不要全局禁用？
全站统一设 transparent 看似省事，但容易踩两个隐性坑：
- 部分屏幕阅读器依赖这个高亮判断当前操作焦点，突然消失会影响可访问性审查结果
- 纯图标按钮（如关闭 ×、返回 ←）可以放心关；但表单提交按钮、导航菜单项建议保留，或至少补上清晰的
:focus轮廓（如outline: 2px solid #007aff） - 微信内嵌 WebView 对该属性支持不稳定，某些版本下即使写了也不生效 —— 得靠伪元素或 JS touchstart 事件兜底
真正麻烦的不是写这行 CSS，而是判断“这个按钮到底该不该关高亮”，以及关掉之后怎么让手指知道它确实被点了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
