:focus-visible 更可靠，因它仅在键盘操作（如Tab）触发焦点时生效，避免鼠标点击时出现干扰性轮廓线；但需JS降级支持旧浏览器，并配合tabindex="0"确保自定义元素可聚焦。
focus-visible 为什么比 :focus 更可靠
因为默认的 :focus 会在鼠标点击后也触发，导致很多用户看到“莫名其妙的轮廓线”。这不是 bug，是浏览器原生行为——只要元素获得焦点（不管怎么获得），:focus 就匹配。但无障碍用户依赖键盘导航，他们才真正需要可见焦点；鼠标用户不需要，甚至会觉得干扰。
用 :focus-visible 能自动区分：只有键盘操作（Tab、Shift+Tab、方向键等）触发焦点时才生效，鼠标或触摸操作则不显示。不过它不是所有浏览器都支持，尤其旧版 Safari 和 IE 完全不认。
- Chrome 86+、Firefox 84+、Edge 89+ 原生支持
:focus-visible - Safari 15.4+ 开始支持，但需开启实验性功能（部分系统仍不稳定）
- 没支持时，浏览器会忽略整条规则，不会报错，但焦点样式就没了
- 别用
:focus:not(:focus-visible)反向隐藏——这在不支持的浏览器里会让所有焦点都不可见
如何安全降级到 :focus + JS 检测
只靠 CSS 无法在不支持 :focus-visible 的环境里精准判断输入方式。必须配合 JS 监听 keydown 和 mousedown，动态加 class 控制样式。核心逻辑是：一旦检测到键盘操作，就给 document 加一个标记类，让 CSS 有条件启用焦点样式。
示例做法：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('keydown', () => {
document.body.classList.add('keyboard-focus');
});
document.addEventListener('mousedown', () => {
document.body.classList.remove('keyboard-focus');
});
对应 CSS：
.keyboard-focus button:focus,
.keyboard-focus a:focus,
.keyboard-focus [tabindex]:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
- 不要监听
focus事件来判断——它本身不携带输入源信息 - 监听
keydown比监听keyup更及时，避免首次 Tab 按下时样式延迟 - 移除
keyboard-focus类的时机要谨慎：mousedown是最稳妥的选择，click有延迟且可能漏掉右键 - 这个 class 最好加在
body上，而不是每个元素单独处理，性能和维护成本更低
outline 和 box-shadow 哪个更适合做焦点样式
outline 是传统方案，但它绕过布局、不占空间、无法圆角，而且在高对比度模式下可能被系统强制覆盖。而 box-shadow 可控性强，能做圆角、内阴影、多层效果，还能避开高对比度模式干扰——前提是不用 outline: none 彻底干掉原生 outline。
- 必须保留
outline: none吗？不一定。如果用box-shadow替代，可以留着原生outline作为兜底（比如在高对比度模式下） - 推荐写法：
outline: 2px solid transparent; box-shadow: 0 0 0 2px #0066cc;——既满足可访问性检测工具对 outline 的要求，又用 shadow 实现视觉样式 - 避免用
border：它会改变元素尺寸，引发布局偏移，对按钮、链接这类内联元素尤其危险 - 注意颜色对比度：WCAG 要求焦点指示器与周围背景对比度 ≥ 3:1，深色背景上慎用浅灰
哪些元素必须手动加 tabindex="0"
默认可聚焦的只有 a、button、input、select、textarea 和带 contenteditable 的元素。但很多交互组件（比如自定义下拉菜单、卡片式列表项、图标按钮）是 div 或 span，它们天然不可聚焦，键盘用户根本 Tab 不进去。
- 只在需要键盘交互时才加
tabindex="0"，不是所有容器都要加 - 加了
tabindex="0"后，必须同步实现Enter/Space响应逻辑，否则键盘用户卡在那儿没反应 - 千万别用
tabindex="-1"来“临时聚焦”却忘了后续可操作性——它只能通过 JS 聚焦，不能被 Tab 到，对屏幕阅读器也不友好 - 用
role="button"或role="link"配合tabindex="0"，能让屏幕阅读器正确播报其用途
