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

概述 `:focus-within` 在元素自身或其后代获取焦点时匹配，适用于高亮容器、显示辅助提示、展开交互区域等，增强键盘与读屏体验。 示例 ```css .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/