:focus-within 是 CSS 伪类，当元素自身或后代获得焦点时生效，常用于表单容器高亮、下拉菜单激活和卡片交互；例如输入框聚焦时使父容器变色，提升可访问性与视觉反馈，现代浏览器支持良好，IE 不支持可用 JavaScript 模拟。
当表单元素内部获得焦点时，我们常常希望其父容器也能响应这种状态变化，比如高亮边框或改变背景色。CSS 的 :focus-within 伪类正是为此设计的——它允许父元素在任意子元素获得焦点时应用特定样式。
什么是 :focus-within
:focus-within 是一个 CSS 伪类，应用于一个元素时，只要该元素自身或其任意后代元素处于 focus 状态，这个伪类就会生效。这在构建可访问性良好的表单、下拉菜单或输入框组合时非常实用。
例如，一个包含 label 和 input 的 div 容器，在用户点击输入框时，可以让整个容器变色：
使用 :focus-within 可以轻松实现聚焦反馈：
立即学习“前端免费学习笔记（深入）”；
.container { padding: 10px; border: 1px solid #ccc; } .container:focus-within { background-color: #f0f8ff; border-color: #007cba; box-shadow: 0 0 5px rgba(0, 124124, 186, 0.3); }常见应用场景
这个特性特别适合以下几种情况：
- 表单分组高亮：当用户进入某个字段时，突出显示整个表单项区域，提升视觉引导。
- 下拉菜单激活：下拉容器内有搜索框或可聚焦选项时，保持菜单展开或高亮外框。
- 卡片交互增强：卡片中包含可编辑内容（如备注、标签输入），聚焦任一子元素时让卡片“活”起来。
实际代码示例
下面是一个带有图标和输入框的搜索区域：
<div class="search-group"> <i class="icon">?</i> <input type="text" placeholder="搜索..." /> </div>
对应的 CSS：
.search-group { display: flex; align-items: center; border: 2px solid #ddd; border-radius: 8px; padding: 4px; transition: all 0.2s ease; } .search-group:focus-within { border-color: #007cba; outline: 2px solid #007cba; outline-offset: 2px; } .search-group input { border: none; outline: none; flex: 1; padding: 8px; }当用户点击输入框时，外层容器立即获得视觉反馈，即使图标或包装元素本身不可聚焦。
浏览器兼容性与注意事项
:focus-within 在现代浏览器中支持良好（Chrome、Firefox、Edge、Safari 通用），但不支持 IE。如果需要兼容旧版浏览器，可用 JavaScript 模拟：
document.addEventListener('focusin', function(e) { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { e.target.closest('.container')?.classList.add('focused'); } }); document.addEventListener('focusout', function(e) { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { e.target.closest('.container')?.classList.remove('focused'); } });配合 CSS 中的 .container.focused 实现类似效果。
基本上就这些。:focus-within 简洁高效，让结构与行为解耦，是现代 CSS 提升用户体验的好工具。
