:focus-visible 更靠谱，因为它仅在键盘Tab导航时触发，避免鼠标点击时误显轮廓线，兼顾视觉整洁与可访问性；需配合:focus回退并注意outline样式、对比度及组件范围限定。
focus-visible 为什么比 :focus 更靠谱
因为 :focus 在鼠标点击时也会触发，导致“明明没用键盘操作，却突然出现难看的轮廓线”——这既干扰视觉，又违背可访问性直觉。而 :focus-visible 是浏览器原生判断：只有当用户**真正通过键盘 Tab 导航聚焦**时才生效，自动避开鼠标/触控场景。
实操建议：
- 别直接替换所有
:focus，先加在需要强反馈的关键控件上（比如button、input[type="text"]、自定义role="button"元素） - 必须配合
:focus回退：现代浏览器支持:focus-visible，老浏览器（如 IE、旧版 Safari）会忽略它，靠:focus保底 - Chrome 86+ 和 Firefox 85+ 支持良好；Safari 15.4+ 开始支持，但早期版本需用 focus-visible polyfill
:focus-visible 的颜色设置要避开哪些坑
最常见错误是只改 outline-color，结果被默认 outline-offset 或 outline-style 吃掉效果，或者和设计系统冲突导致看不见。
实操建议：
- 务必显式声明
outline-style: solid，否则某些浏览器（如 Safari）可能默认为none - 用
outline-offset: 2px微调位置，避免紧贴边框显得拥挤；但别设负值，容易被裁剪 - 颜色别只依赖亮度对比——测试下深色模式下是否仍满足 WCAG AA 级对比度（至少 4.5:1），比如
#0066cc在白底上 OK，但在灰黑背景上可能发灰 - 慎用
outline: none+ 自绘边框（如box-shadow）：虽然自由度高，但屏幕阅读器和部分辅助技术可能无法识别该“焦点状态”
如何让 focus-visible 只作用于特定组件
全局加 :focus-visible 容易污染第三方 UI 库或 legacy 组件，尤其当它们自己已写死 :focus 样式时，叠加后反而错乱。
实操建议：
- 用属性选择器限定范围，比如
[data-focusable] > button:focus-visible，再配合 JS 在初始化时给目标元素加data-focusable - 对 React/Vue 组件，推荐封装成原子类名，例如
class="btn btn--focus-visible"，CSS 写成.btn--focus-visible:focus-visible - 如果要用 CSS-in-JS（如 styled-components），确保生成的 class 能被
:focus-visible正确捕获——有些库默认不透传伪类，得显式写成&:focus-visible - 避免用 ID 选择器（如
#search-input:focus-visible），不利于复用和测试
focus-visible 和 outline 的性能与兼容性权衡
:focus-visible 本身无运行时开销，但滥用 outline 动画或复杂 box-shadow 会导致焦点切换卡顿，尤其在低端 Android 设备上。
实操建议：
- 禁用 outline 动画：
transition: outline-color 0.15s ease可以，但transition: outline 0.2s会强制重绘整个 outline 区域，卡 - 真要动效？改用
box-shadow+transform，它们走 GPU 加速，且不会影响布局流 - 兼容性兜底不是简单写两条规则：优先写
:focus-visible，再换行写:focus:not(:focus-visible)来明确关闭鼠标场景下的焦点样式（防止双样式打架） - 注意 SSR 场景：服务端渲染时无法判断是否键盘聚焦，所以
:focus-visible必须纯客户端生效，JS 不可用时就靠:focus回退
focus-visible 的核心价值不在“炫技”，而在把颜色反馈这件事交给浏览器判断——你只需要管好颜色、位置、对比度，剩下的交给 :focus-visible 自己决定何时出现。漏掉这点，再漂亮的颜色也没意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
