:focus-visible本身不会在鼠标点击时触发，蓝框来自:focus；真正起作用的是:focus:not(:focus-visible)组合写法，需按顺序声明:focus、:focus:not(:focus-visible)、:focus-visible，并确保:focus-visible有显式outline值。
直接结论：:focus-visible 本身就不会在鼠标点击时触发，所谓“鼠标点击产生边框”根本不是它的问题——你看到的蓝框来自 :focus，而 :focus-visible 还没进场。
为什么写了 button:focus-visible { outline: none; } 没用？
因为浏览器压根不匹配这条规则。鼠标点击不会让 :focus-visible 生效，它只响应键盘导航（Tab/Shift+Tab/Enter/Space）。你写的这行 CSS 在鼠标场景下等于不存在。
常见错误现象：
- 开发者工具里看到
:focus-visible规则被灰色禁用（未激活） - 点按钮仍有蓝框，但按 Tab 键却没轮廓——说明
:focus-visible根本没触发 - 误以为是兼容性问题，其实是选择器逻辑错配
:focus:not(:focus-visible) 才是真正起作用的组合
必须用这个组合清除鼠标点击带来的 outline，顺序不能颠倒：
- 先写
button:focus（定义基础焦点行为，比如保留默认 outline 或设为统一样式） - 紧接着写
button:focus:not(:focus-visible)（专门针对鼠标/触摸等非键盘触发场景，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;
}
哪些元素上 :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 行为，和焦点逻辑完全无关。
解决它得单独处理：
- 对可点击元素（如
button、a、带onclick的容器）加-webkit-tap-highlight-color: transparent; - 别把它和
outline混为一谈，也别试图用:focus-visible去覆盖
最容易被忽略的点：页面首次交互是鼠标点击时，部分浏览器会“降级”整个会话的 :focus-visible 判断逻辑，直到用户手动按一次 Tab 键才恢复。真机测试务必用 Tab 键验证，而不是只点鼠标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
