移动端点击链接后 outline:none 不生效，是因为现代浏览器改用 :focus-visible 控制焦点样式，而触摸操作不触发 :focus；应改用 a:focus-visible { outline: none } 并配合 -webkit-tap-highlight-color: transparent 消除高亮。
outline: none 在移动端点击链接后依然显示虚线框，基本不是写法错了，而是它压根没生效——现代移动浏览器（iOS Safari、Chrome for Android）默认用 :focus-visible 控制焦点样式，:focus 规则根本不会触发。
移动端点击后 outline:none 不生效的真正原因
安卓 Chrome 88+ 和 iOS Safari 15.4+ 都已支持 :focus-visible，且默认只在键盘导航（比如外接蓝牙键盘或开关了“辅助触控”）时才激活该伪类。手指点按、触摸 tap 属于「指针操作」，浏览器会跳过 :focus 直接走 :active 状态，而 outline 又只在 :focus 下起作用。所以你写了 a:focus { outline: none }，但用户点下去时这个规则根本没匹配上。
常见错误现象：
- 开发者工具里看到
outline显示为none，但真机上仍有灰蓝色虚线 - 模拟器里正常，真机 Safari 上失效
- 加了
!important也没用——不是权重问题，是选择器根本没命中
正确写法：用 :focus-visible 替代 :focus
必须显式覆盖 :focus-visible，而不是 :focus。这是当前最稳妥、符合可访问性规范的做法。
实操建议：
- 把原来写的
a:focus { outline: none }改成a:focus-visible { outline: none } - 如果想保留键盘用户的视觉反馈，可以换成更可控的样式：
a:focus-visible { outline: none; box-shadow: 0 0 0 2px #007bff; } - 避免全局写
*:focus-visible { outline: none }——会干掉input、select等表单元素的必要焦点提示 - 确保 CSS 加载顺序：自定义样式必须在重置库（如 Normalize.css）和 UI 框架（如 Ant Design Mobile）之后
iOS Safari 的特殊处理：-webkit-tap-highlight-color
iOS Safari 点击链接/按钮时，除了 outline，还会叠加一层半透明灰色高亮（-webkit-tap-highlight-color），它和 outline 是两套机制，禁掉 outline 对它完全没影响。
实操建议：
- 加这条规则彻底消除点击瞬时色块：
a, button, input, textarea { -webkit-tap-highlight-color: transparent; } - 注意：设为
transparent即可，不要用rgba(0,0,0,0)或none，后者不被识别 - 这条属性仅对 iOS Safari 和旧版 Android WebView 有效，不影响其他平台
React/Vue 项目中点击后虚线残留的隐藏陷阱
在 React 或 Vue 组件里，即使 CSS 写对了，点击后虚线仍不消失，大概率是因为事件处理器里调用了 e.preventDefault() 或手动 focus() 逻辑没清理干净。
实操建议：
- 检查是否给
<a href="#" onclick="{...}"></a>加了e.preventDefault()——这会阻止浏览器默认的 focus 状态清除流程 - 如果用了
ref主动聚焦某个按钮（比如弹窗打开后自动 focus 确认按钮），关闭时记得同步调用ref.current?.blur() - 避免用
role="button"的<div> 代替原生 <code><button></button>——前者没有内置 focus 管理，outline 行为不可预测，修复成本远高于换回原生标签真正难的不是写
outline: none，而是判断当前虚线到底来自哪一层：是:focus-visible？是-webkit-tap-highlight-color？还是框架注入的 reset 规则？先打开真机调试，看「Computed」面板里最终生效的outline和-webkit-tap-highlight-color值，再决定动哪条规则。
