:focus-within 是 CSS 中用于父元素在子元素获得焦点时应用样式的伪类，可实现表单高亮、下拉菜单展开等交互效果，无需 JavaScript。例如当 input 被聚焦时，外层 .form-container 会触发样式变化，提升可访问性和开发效率。
CSS 中的 :focus-within 是一个非常实用的伪类选择器，它能帮助我们在某个元素内部任意子元素获得焦点时，对这个父容器应用样式。这个特性在构建交互性强的表单、下拉菜单或可编辑区域时特别有用。
什么是 :focus-within？
当一个元素本身或其任何后代元素处于聚焦状态（比如输入框被点击或通过 Tab 键选中）时，:focus-within 就会被激活。这让我们无需 JavaScript 就能实现“父级响应子级焦点”的效果。
例如：
有一个表单容器包含多个 input，我们希望用户开始输入时，整个容器边框变色。使用 :focus-within 可以轻松实现。
立即学习“前端免费学习笔记（深入）”；
.form-container {
padding: 16px;
border: 2px solid #ccc;
border-radius: 8px;
}
.form-container:focus-within {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}只要任何一个 input 被聚焦，.form-container 就会应用高亮样式。
常见应用场景
:focus-within 特别适合以下几种情况：
- 表单高亮：用户进入某个表单区域时，视觉上突出显示当前操作区。
- 下拉菜单展开：当菜单内的搜索框或选项被聚焦时，显示隐藏的菜单内容。
- 可编辑区域样式变化：如 contenteditable 的 div 内部文本被编辑时，改变外层样式。
- 辅助功能增强：提升键盘导航用户的体验，让焦点路径更清晰。
与 :focus 的区别
:focus 只作用于当前获得焦点的元素本身，而 :focus-within 作用于包含聚焦子元素的祖先元素。
比如一个 button 在 div 内被点击，:focus 只能让 button 改变样式；但用 :focus-within，可以让外层 div 响应这个行为。
浏览器兼容性与注意事项
现代主流浏览器都已支持 :focus-within，包括 Chrome、Firefox、Edge 和 Safari（部分旧版本需注意）。
如果需要兼容低版本浏览器（如 IE），建议配合 JavaScript 实现类似逻辑，或使用 JS 添加类名来模拟行为。
基本上就这些。掌握 :focus-within 能让你的 CSS 更智能，减少对 JavaScript 的依赖，提升开发效率和可维护性。
