CSS focus-within：层级焦点与交互管理

---

title: CSS focus-within：层级焦点与交互管理

keywords:

• :focus-within
• 焦点管理
• 交互状态
• 键盘导航
• 可访问性

description: 介绍 :focus-within 的层级焦点选择器，便于为包含焦点的容器应用样式与交互状态，提升可访问性与表单/菜单体验，提供示例与建议。

categories:

• 文章资讯
• 编程技术

---

概述

:focus-within 在元素自身或其后代获取焦点时匹配，适用于高亮容器、显示辅助提示、展开交互区域等，增强键盘与读屏体验。

示例

.field:focus-within { outline: 2px solid Highlight; outline-offset: 2px }
.menu:focus-within .submenu { display: block }

工程建议

• 组合使用：与 :focus-visible 配合控制不同交互下的样式；避免过度闪烁。
• 结构与语义：确保容器与控件语义正确；Tab 顺序合理。
• 兼容：在旧浏览器回退到 JS 管理类名；保持一致体验。

参考与验证

• MDN :focus-within 文档：https://developer.mozilla.org/docs/Web/CSS/:focus-within
• web.dev 无障碍焦点指南：https://web.dev/