移动端:focus点击后不消失，因焦点获益后无自动转移机制；需用:focus-visible区分键盘/点击行为，并禁用-webkit-tap-highlight-color消除点击高亮。
不是 :focus 本身“残留”，而是它在移动端被持续激活且无自然退出路径——点击按钮后焦点没移走，样式就一直挂着。
为什么移动端:focus点击后不消失
浏览器对:focus的判定逻辑是：只要元素获得焦点，:focus就生效；而移动端点击
- 原生表单控件（如
button、input[type="submit"]）默认可聚焦，点击即触发:focus - 没有显式调用
blur()或切换到其他可聚焦元素时，焦点状态会长期保留 - 某些内核（如微信 X5）甚至在页面滚动后也不清焦点，导致蓝边/高亮“钉”在那儿
别直接写 outline: none 就完事
清除默认轮廓看似简单，但会直接破坏键盘用户的可访问性。更糟的是，很多项目只加了 outline: none 却没补替代样式，结果是：鼠标用户看不到焦点，键盘用户也找不到当前在哪。
- 必须保留
:focus规则，哪怕只是改个box-shadow或border-color - 用
outline-offset微调位置，避免和边框重叠造成视觉模糊 - 如果用
border模拟焦点，记得默认设border: 2px solid transparent，防止布局抖动
用 :focus-visible 精准隔离点击与键盘行为
:focus-visible 是目前最靠谱的解法，但它不是“开关”，而是需要和 :focus 配合使用。
- 先写基础
button:focus { outline: none; }，确保所有聚焦都有统一处理 - 再写
button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }，只给键盘用户加视觉提示 - 注意顺序：把
:focus-visible放在:focus后面，否则会被覆盖 - 兼容性兜底：老版 Safari 或 X5 内核不支持
@supports selector(:focus-visible)，得用 JS 检测后动态加 class
真机调试时最容易忽略的一点
iOS 上你看到的那个半透明蓝色 overlay，根本不是 :focus 或 :focus-visible 控制的——那是 WebKit 的 tap highlight，和焦点完全无关。要关它，得单独写：
button {
-webkit-tap-highlight-color: transparent;
}
这个属性不影响焦点逻辑，但能消除点击瞬间的干扰色块。别把它和 outline 混为一谈，也别指望加了它就能解决:focus残留问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
