:focus-visible是仅在键盘聚焦时生效的伪类，而:focus对所有聚焦方式均触发；前者智能避免鼠标点击时的视觉干扰，后者无差别响应键盘、鼠标及JS聚焦，兼顾可访问性与用户体验。
什么是:focus-visible，它和:focus有什么区别
:focus-visible 是一个伪类，只在用户通过键盘（如 Tab 键）触发焦点时生效，而鼠标点击或触摸激活的元素通常不会匹配它。这和 :focus 不同——后者只要元素获得焦点就触发，不管来源是键盘、鼠标还是 JS 调用 element.focus()。
关键点在于：浏览器会根据用户交互方式“猜测”意图。比如你用鼠标点一个按钮，它获得焦点但不显示 :focus-visible 样式；但按 Tab 进入该按钮时，样式就出现。这个行为由 UA（浏览器）自动判断，不是开发者手动开关。
注意：:focus-visible 不是所有浏览器都默认启用完整逻辑。Chrome/Edge 102+ 和 Firefox 83+ 支持，但 Safari 目前（截至 Safari 17.5）仍不支持，且部分旧版 Chrome 需要启用实验性标志。
怎么正确用:focus-visible替代outline实现可访问焦点指示
很多开发者想移除丑陋的默认 outline，又怕影响键盘用户的可访问性。用 :focus-visible 是目前最稳妥的折中方案：
- 先用
*:focus { outline: none; }移除所有默认焦点框（危险！别这么干） - 改为只对键盘焦点加样式：
*:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } - 确保按钮、输入框等可聚焦元素本身支持键盘操作（比如
button、input默认可聚焦，div需加tabindex="0"）
示例：
button:focus {
outline: none; /* 不要单独这样写 */
}
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
这样鼠标点击按钮没 outline，Tab 进去就有，既清爽又保可访问性。
为什么有时:focus-visible不触发？常见原因
这不是 bug，而是浏览器的启发式判断在起作用。以下情况会导致 :focus-visible 失效：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用户第一次与页面交互是鼠标（比如刚打开页面就点按钮），后续 Tab 导航可能仍不触发
:focus-visible，直到用户主动按 Tab 或 Esc 重置“输入模式” - 元素没有明确的可聚焦语义（比如
div没设tabindex，或被pointer-events: none拦截） - CSS 中写了
outline: 0或outline: none在更早的规则里，覆盖了:focus-visible的样式 - 用了
element.focus({ focusVisible: false })（JS 显式禁止）
调试建议：打开 DevTools，在 Elements 面板选中元素，手动勾选 :focus-visible 强制触发，看样式是否生效——能生效说明 CSS 没问题，问题出在触发条件上。
兼容性兜底策略：如何让老浏览器也有键盘焦点提示
Safari 不支持 :focus-visible，IE 更不用提。不能只靠它。推荐组合方案：
- 对现代浏览器用
:focus-visible做精准控制 - 对不支持的浏览器降级为
:focus，但加 JS 判断输入方式（较重，一般不推荐） - 更轻量的做法：保留基础
:focus样式，但用@supports覆盖
示例：
button:focus {
outline: 2px solid #999;
}
@supports (selector(:focus-visible)) {
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
}
这样 Safari 用户仍有基础焦点提示，Chrome/Firefox 用户获得更精细的体验。
真正容易被忽略的是：焦点管理不只是加个伪类。如果页面有模态框，但没把焦点限制在其中，或者关闭后没恢复上一个焦点元素，:focus-visible 再准也没用——可访问性是链式问题，不是单点样式能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
