:focus-visible本身不响应鼠标点击，蓝框来自:focus；真正生效的是:focus:not(:focus-visible)组合，需按:focus、:focus:not(:focus-visible)、:focus-visible顺序声明，并确保:focus-visible有显式outline值。
根本不用改:focus-visible，你看到的蓝框压根不是它画的——那是:focus在干活。
为什么 button:focus-visible { outline: none; } 完全没用
浏览器只在键盘导航（Tab/Shift+Tab/Enter/Space）时才匹配 :focus-visible；鼠标点击按钮时，:focus-visible 根本不生效，DevTools 里那条规则会显示为灰色禁用。你写的这行 CSS 在点击场景下等于不存在。
- 常见错误现象：
button:focus-visible { outline: none; }写了但蓝框还在，按 Tab 却没轮廓——说明:focus-visible压根没触发 - 真正起作用的是
:focus:not(:focus-visible)这个组合选择器，它专门捕获“有焦点但非键盘触发”的情况 - 顺序不能颠倒：必须先写
:focus，再写:focus:not(:focus-visible)，最后写:focus-visible
正确的三步声明顺序
只靠单条规则解决不了问题，必须按逻辑链写：
-
button:focus：定义基础焦点行为（比如保留默认 outline 或统一设为outline: 2px solid #007aff;） -
button:focus:not(:focus-visible)：专清鼠标/触摸触发的 outline，写outline: none; -
button:focus-visible：给键盘用户显式提供可访问轮廓，outline必须有值（outline: 0或空规则无效）
示例：
立即学习“前端免费学习笔记（深入）”；
button:focus { outline: 2px solid #007aff; }
button:focus:not(:focus-visible) { outline: none; }
button:focus-visible { outline: 2px solid #007aff; outline-offset: 2px; }
哪些元素上 :focus-visible 根本不会触发
不是所有能聚焦的元素都支持该伪类的智能判断。浏览器只对语义明确、需焦点提示的控件启用：
- ✅ 默认支持：
input、textarea、button、select、带tabindex且有role="button"的div - ❌ 基本不触发：
a（无href）、span（哪怕写了tabindex="0"）、img（本身不可聚焦） - ⚠️ 自定义组件要小心：用
div+tabindex模拟按钮，但没加role或没监听Enter/Space，旧 Safari 可能跳过:focus-visible
iOS 点击蓝 overlay 不是 :focus 问题
如果你在 iPhone 上点按钮看到半透明蓝色遮罩，那和 :focus 或 :focus-visible 完全无关——这是 WebKit 的 -webkit-tap-highlight-color 行为。
- 解决方式是单独处理：
-webkit-tap-highlight-color: transparent; - 这个样式只对可点击区域生效（如
button、a、带onclick的容器），不影响任何焦点逻辑 - 别把它和
outline混为一谈，也别试图用:focus-visible去覆盖它
最常被忽略的其实是全局重置：很多项目或框架悄悄写了 *:focus { outline: none; }，直接废掉了 :focus-visible 的前提。检查 DevTools 的 computed styles，确认 outline 没被提前干掉。
