:focus-visible能自动区分键盘和鼠标操作，因浏览器仅在tab、shift+tab、方向键、enter或space导航时触发它，鼠标点击、触摸、js focus()均不匹配；必须与:focus配合且:focus在前，否则鼠标用户无反馈、旧浏览器键盘用户失焦。
为什么:focus-visible能自动区分键盘和鼠标操作
:focus-visible 的核心价值不是“更炫”，而是浏览器内置的启发式判断：它只在用户明确使用 Tab、Shift+Tab、方向键、Enter 或 Space 进行导航时才匹配。鼠标点击、触摸 tap、甚至 JS 调用 element.focus() 都不会触发它。
这意味着：button:focus-visible { outline: 2px solid #0066cc; } 只对键盘用户生效，鼠标用户点按钮后不会突兀弹出轮廓线——视觉不被打断，键盘路径却始终清晰。
- 常见错误现象：只写
button:focus { outline: 2px solid blue; }→ 鼠标用户每次点击都看到蓝框，设计动效被干扰 - 表单控件（如
<input>）不能全盘套用:focus-visible，因为它们需要始终有输入态反馈（光标、边框高亮），这部分必须由:focus保证 - 自定义按钮（如
<div role="button" tabindex="0">）默认不触发 <code>:focus-visible，除非监听了keydown并处理 Enter/Space为什么:focus不能直接替代:focus-visible
:focus是“有没有焦点”的开关，:focus-visible是“怎么获得焦点”的上下文。二者语义不同，强行用:focus降级会丢失意图信息。- 旧版 Safari（15.3 及更早）完全忽略
:focus-visible规则，但不会报错；如果 CSS 里只有:focus-visible，键盘用户在这些环境里将彻底失去焦点指示 - 全局写了
* { outline: none; }后，:focus-visible样式也会被清掉，必须显式恢复：button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } -
@supports selector(:focus-visible)在 Safari 15.3 及更早版本中解析失败，整个 CSS 块被丢弃——你连兜底样式都拿不到
为什么:focus和:focus-visible必须按顺序声明
顺序决定降级是否可靠。浏览器不支持
:focus-visible时，整条规则被丢弃，但前面的:focus仍有效——前提是它写在前面。- ✅ 正确：
button:focus { outline: none; }在前，button:focus-visible { outline: 2px solid #0066cc; }在后 - ❌ 错误：
:focus-visible写在:focus前面，或加!important强行覆盖，会导致旧浏览器里:focus也被“遮住” - DevTools Elements 面板可手动勾选
:focus和:focus-visible状态，比反复切键盘更快验证样式是否生效
兼容性差时真正可行的路径只有两个
别碰
@supports selector()，也别手写 JS 模拟“是否键盘触发”——浏览器的启发式逻辑不公开、不稳定、移动端尤其难复现。- 引入
js-focus-visiblePolyfill：体积小（约 2KB gzip），IE11 到 Chrome 49 全覆盖，内部已处理 Safari 移动端 focus 限制 - 坚持「渐进增强」写法：
:focus兜底 +:focus-visible覆盖，不依赖任何运行时检测 - 自定义元素（React Button、Web Component、
tabindex="0"的<div>）必须设 <code>role、监听keydown、避免pointer-events: none，否则 Polyfill 无法识别最容易被忽略的是：表单控件的输入态反馈不能交给
:focus-visible，而必须由:focus保证；可操作控件（按钮、链接、summary）才适合用:focus-visible控制焦点环。这两类混用或漏掉一类，键盘用户就可能在某段流程里彻底失焦。
- 旧版 Safari（15.3 及更早）完全忽略
