:focus-visible 仅在键盘导航（如Tab）触发焦点时生效，鼠标点击或JS调用focus()默认不激活；需与:focus共存并后置声明，且须为键盘用户保留可见焦点提示。
为什么 :focus-visible 样式完全没反应
绝大多数情况下，是因为浏览器没进入“键盘对焦模式”——:focus-visible 不是只要元素获得焦点就触发，它只在用户**通过键盘（Tab/Shift+Tab/Enter/Space 等）导航触发焦点**时才生效。鼠标点击、触摸、或 JavaScript 主动调用 element.focus() 默认不会激活它。
这是设计行为，不是 bug。浏览器靠内部的“焦点输入方式检测机制”决定是否启用 :focus-visible，而该机制依赖 UA 的启发式判断（比如上一次交互是鼠标还是键盘），且不同浏览器实现细节有差异。
- Chrome 86+ 和 Edge 86+ 支持较稳定，但默认仅在键盘导航后才开启
- Safari 直到 15.4 才开始支持，且早期版本对
button、a等原生可聚焦元素的支持不一致 - Firefox 使用
:focus-ring（已废弃）过渡期长，现在也支持:focus-visible，但需确认版本 ≥ 89
:focus-visible 和 :focus 能否共存
可以共存，而且推荐这样用：用 :focus 提供基础焦点样式（保障可访问性底线），再用 :focus-visible 叠加更精细的视觉反馈（比如更粗的轮廓、颜色变化），同时避免鼠标用户的“意外高亮”。
关键点在于层叠顺序和重置逻辑：
立即学习“前端免费学习笔记（深入）”；
- 务必把
:focus-visible写在:focus后面，否则会被覆盖 - 不要在
:focus-visible中写outline: none，除非你同步提供了替代视觉提示（如box-shadow），否则会破坏键盘用户的焦点追踪 - 若想“鼠标点击后隐藏 outline，但 Tab 进来仍显示”，不能只靠 CSS；需配合
focusin事件监听 +document.activeElement判断输入方式，或使用 WICG focus-visible polyfill
示例正确写法：
button:focus {
outline: 2px solid #aaa;
}
button:focus-visible {
outline: 3px solid #007aff;
outline-offset: 2px;
}
哪些元素默认不触发 :focus-visible
不是所有可聚焦元素都平等对待。浏览器对“是否需要 visible focus indicator”有内置判断，常见例外包括：
-
input[type="button"]、input[type="submit"]在 Chrome 中常被跳过（因认为它们已有足够视觉反馈） - 自定义组件（如
div[tabindex="0"]）在 Safari 15.4–16.3 中可能完全不触发，除非显式设置role="button" - 禁用状态（
disabled）或display: none/visibility: hidden的元素永远不会匹配 - 某些 WebKit 内核下，
contenteditable元素的:focus-visible行为不稳定
验证方法：打开 DevTools → Elements 面板 → 选中目标元素 → 在 Styles 面板勾选 “:focus-visible” 强制状态，看样式是否生效；若生效，说明规则没问题，问题出在触发条件未满足。
如何强制让某个点击操作触发 :focus-visible
不能“强制触发”，但可以“模拟键盘焦点语义”。最可靠的方式是：在鼠标事件处理函数中，调用 element.focus({ preventScroll: true, focusVisible: true }) —— 注意这是 focus() 的新选项，仅 Chromium 86+ 和 Firefox 115+ 支持，Safari 尚未实现 focusVisible 选项。
兼容性兜底方案：
- 给元素添加临时 class（如
js-focus-visible），并在 CSS 中用.js-focus-visible:focus模拟效果 - 监听
mousedown+keydown组合，记录最近一次输入类型，动态切换 class - 直接引入
focus-visiblepolyfill，并确保它在 JS 执行前加载（defer或放在）
polyfill 会自动监听 pointerdown 和 keydown，并为符合 keyboard-initiated 条件的 focus 添加 data-focus-visible-added 属性，CSS 可写作：[data-focus-visible-added]:focus。
真正难处理的是混合交互场景：比如一个按钮既支持鼠标点击又支持空格键触发，但用户先点再按 Tab，此时浏览器可能误判输入方式。这种边界情况没有银弹，得靠真实用户测试 + 降级策略保底。
