:focus-within 是 CSS 伪类，当元素的任意后代获得焦点时生效，可用于表单容器高亮、显示清除按钮等场景，提升可用性，支持现代浏览器，无需 JavaScript。
当用户与表单或可聚焦元素交互时，我们常需要高亮整个容器来提升可用性。CSS 的 :focus-within 伪类正是为此设计——它允许父容器在任意子元素获得焦点时应用样式，无需 JavaScript。
什么是 :focus-within？
:focus-within 是一个 CSS 伪类，应用于某个元素时，只要该元素的任意后代元素处于:focus状态，该样式就会生效。这特别适合用于表单组、输入框组合、下拉菜单等场景。
例如，一个包裹 input 的 div，在 input 获得焦点时，让整个 div 边框变色：
控制子元素显示（如清除按钮）
常见需求是：仅当输入框有内容且获得焦点时，显示“清空”按钮。使用 :focus-within 可轻松实现。
立即学习“前端免费学习笔记（深入）”；
结构示例：
CSS 实现：
.clear-btn { display: none; background: none; border: none; cursor: pointer; } .search-box:focus-within .clear-btn { display: block; }这样，只要 input 获得焦点，.clear-btn 就会显现，提升交互体验。
嵌套结构中的灵活应用
:focus-within 不限于直接子元素，任何后代触发 focus 都会激活它。适用于复杂组件，如下拉选择器或组合输入框。
比如一个带图标的输入组：
?
样式：
.form-control { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; } .form-control:focus-within { border-color: #00aaff; background-color: #f8fcff; }即使 icon 是 span，input 获焦时整个容器也能响应。
兼容性与注意事项
:focus-within 支持现代主流浏览器（Chrome 68+, Firefox 52+, Safari 12+），IE 不支持。若需兼容旧版，可结合 JS 模拟。
注意点：
- 只响应可聚焦元素（如 input、textarea、button、contenteditable 元素等）
- 不冒泡，但祖先元素可通过自身 :focus-within 捕获
- 避免过度使用，防止视觉干扰
