CSS focus-visible 与 focus-within：焦点可见性与交互无障碍

---

title: CSS focus-visible 与 focus-within：焦点可见性与交互无障碍

keywords:

• :focus-visible
• :focus-within
• 焦点样式
• 键盘可达性
• 无障碍

description: 使用 :focus-visible 与 :focus-within 提升焦点样式的可见性与一致性，保障键盘与辅助技术的交互体验，并提供兼容建议。

categories:

• 文章资讯
• 编程技术

---

概述

:focus-visible 在键盘或辅助技术触发的聚焦时显示焦点样式，避免鼠标点击产生不必要的轮廓。:focus-within 用于当子元素获得焦点时高亮父容器，提升表单与组合组件体验。

用法/示例

button { outline: none }
button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px }

.field:focus-within { box-shadow: 0 0 0 2px #93c5fd }

工程建议

• 保持清晰可见的焦点样式，遵守对比度与可访问性要求；避免完全移除焦点。
• 在复杂组件上使用 :focus-within 联动高亮容器，帮助用户定位输入区域。
• 对不支持环境使用 :focus 作为回退，并测试键盘导航路径。

参考与验证

• MDN：:focus-visible — https://developer.mozilla.org/docs/Web/CSS/:focus-visible
• MDN：:focus-within — https://developer.mozilla.org/docs/Web/CSS/:focus-within