:focus-visible 未生效主因是被后续同权 :focus 规则覆盖；应将其声明置于 :focus 之后，用 :focus:not(:focus-visible) 精准排除键盘用户，并确保 outline 不被粗暴设为 none 而影响可访问性。
focus-visible 为什么没生效？检查是否被 :focus 覆盖
很多情况下写好了 :focus-visible 样式，但用键盘 Tab 切换时却看不到效果，根本原因是浏览器默认的 :focus 样式（比如 Chrome 的蓝色外框）被后续更宽泛的选择器覆盖了。只要 :focus 规则出现在 :focus-visible 后面，且权重相同，它就会无条件生效，把键盘/鼠标触发的焦点都“一锅端”掉。
实操建议：
- 确保
:focus-visible声明在:focus之后（顺序很重要） - 避免用
*:focus或button:focus这类通用规则清空 outline，改用:focus:not(:focus-visible)精准排除键盘用户 - 开发时打开 DevTools → Elements 面板，选中元素后手动勾选
:focus-visible伪类，验证样式是否真的被加载
如何让 focus-visible 只对键盘操作生效？别漏掉 user-agent 默认行为
Chrome/Firefox 等现代浏览器已原生支持 :focus-visible，但它依赖 UA 的启发式判断：只有当焦点是通过键盘（Tab、Shift+Tab、空格、Enter 等）进入时才触发；鼠标点击、触摸、element.focus() 调用默认不触发——前提是没干扰 UA 的检测逻辑。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加了
onclick="this.focus()"，这会让鼠标点击后也触发:focus-visible，破坏预期 - 用了
outline: none却没配:focus-visible回退样式，导致键盘用户完全“失焦” - 在 Safari（≤15.4）或旧版 Edge 中
:focus-visible不可用，需用 focus-visible polyfill
兼容 fallback：用 JS 检测键盘焦点并加 class
当必须支持 Safari 15.3 或需要更精细控制时，可以手动模拟 :focus-visible 行为。核心思路是监听 keydown（尤其是 Tab）后标记“当前是键盘模式”，再结合 focus 事件动态加 class。
简短示例：
let keyboardMode = false;
document.addEventListener('keydown', (e) => {
if (e.key === 'Tab') keyboardMode = true;
});
document.addEventListener('mousedown', () => keyboardMode = false);
document.addEventListener('focusin', (e) => {
if (keyboardMode) e.target.classList.add('focus-visible');
});
document.addEventListener('focusout', (e) => {
e.target.classList.remove('focus-visible');
});
注意：focusin/focusout 是冒泡事件，比 focus/blur 更适合委托；但需防重复添加 class，建议配合 classList.toggle 或状态缓存。
focus-visible 和 outline 的性能与可访问性平衡点
很多人一上来就 outline: none，以为只是“去掉难看边框”，其实这是高危操作：它直接让屏幕阅读器用户和键盘导航者失去焦点位置感知。真正该做的是“替换”，不是“删除”。
推荐做法：
- 保留
outline，仅用outline-offset微调位置，避免布局偏移 - 用
outline: 2px solid #0066cc; outline-offset: 2px;替代粗暴的none - 避免用
box-shadow模拟 focus ring，它不被所有辅助技术识别，且在高对比度模式下可能消失 - 测试时关闭图形界面，仅用键盘 Tab 导航走一遍流程，确认每个可交互元素都有清晰、一致的焦点指示
最常被忽略的一点：focus-visible 的意义不在“视觉美化”，而在“区分交互意图”。鼠标用户不需要强焦点提示，但键盘用户每一步都靠它定位。一旦为了设计一致性砍掉它，等于主动放弃一部分真实用户。
