ios点击蓝灰蒙层是webkit的-webkit-tap-highlight-color，需在可点击元素显式设transparent并加user-select:none；:active因触发短且延迟明显，需配合transition和cursor:pointer才可见。
为什么 iOS 点击还有一层蓝灰蒙层？
这不是 bug，是 WebKit 渲染层独立绘制的 -webkit-tap-highlight-color overlay，和 CSS 的 :active 不在一个层级，改背景、加 outline 都压不住它。它只在 Safari、微信 X5 等 WebKit 内核里出现，Android Chrome 62+ 已忽略该属性。
- 必须显式写在可点击元素上，
body或html上设无效，也不继承 - 生效范围仅限语义化交互元素：
a、button、input[type="button"]、input[type="submit"] - 自定义容器（如
div）要同时满足：role="button"+tabindex="0"+ 绑定事件（onclick或ontouchstart） - 值必须是合法颜色，
transparent最稳妥；rgba(0,0,0,0)在旧版 UC 浏览器会失效
写了 -webkit-tap-highlight-color: transparent 还有残影怎么办？
iOS 15.4+ 中单设 transparent 可能残留微弱灰白闪烁——这和高亮本身无关，而是文本可选行为触发的重绘干扰。真正干净关闭需要组合策略：
- 必须加
user-select: none，否则文字区域仍会闪一下 - 不要用
* { -webkit-tap-highlight-color: transparent }，某些 WebView（如旧版微信 X5）会白屏或破坏select焦点反馈 - 若元素内含可编辑文本（如
contenteditable），禁用user-select会影响操作，此时应保留高亮或改用 JS 拦截touchstart并preventDefault()
:active 样式为啥在 iOS 上几乎看不见？
:active 是瞬时伪类，只在手指按住未松开时生效，iOS 上触发延迟明显、持续时间极短，且滑动离开就中断。它不是“已点击”状态，无法替代系统高亮，也不能靠它做持久反馈。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须配
transition（如background 0.12s ease），否则变化像闪烁，人眼抓不住 - 必须显式设
cursor: pointer，否则 iOS Safari 默认不触发:active - 移动端建议加
touch-action: manipulation，避免 300ms 延迟导致:active响应滞后 - 若用了 FastClick 或自定义手势库，
:active可能被抑制，得用 JS 添加临时 class 模拟
想让点击后“保持高亮”，该用 :focus 还是 JS？
不能用 :active，它松手即消失；:focus 可以保持，但前提是元素可聚焦——button、带 href 的 a 天然支持，div 必须加 tabindex="0" 才行。
- 移动端
:focus默认可能隐藏轮廓（iOS Safari 会吃掉outline），需手动补样式，比如outline: 2px solid #007aff - 纯图标按钮（如 ×、←）可放心关高亮；表单提交按钮、导航项建议保留高亮，或至少提供清晰的
:focus轮廓 - 若需精确控制激活态（如多步骤表单当前项、单选标签联动），JS 切换
class更可靠，注意用事件委托避免重复绑定
真实项目里最容易漏的是 user-select: none 和 tabindex 的组合。iOS 15.4+ 后，光清高亮不防文本选中，残影照出；而没加 tabindex 的 div，:focus 根本不会留。这两个点不处理，其他都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
