在网页交互里，我们经常会遇到这样的需求：当用户点进某个输入框、或者里面的按钮获得焦点时，希望包裹它们的整块区域也跟着改变背景、边框或者显示隐藏的提示。过去这种效果大多靠JavaScript监听事件来加类，但其实CSS自己就提供了一个非常直白的解决方案，也就是focus-within选择器。它专门用来匹配那些包含聚焦后代元素的父容器，不需要你写一行脚本就能完成父子状态联动。
一、focus-within的基本语法与触发逻辑
focus-within是一个结构伪类选择器，写法上和普通伪类一样，放在元素选择器的后面，用冒号连接。它的含义是：如果当前元素自身获得了焦点，或者它的任意后代元素获得了焦点，那么这个选择器就会命中当前元素。换句话说，它是一个向上冒泡的焦点状态检测机制，但仅限CSS匹配阶段，并不影响DOM事件流。
下面是一段最基础的用法示例，当form内部的input聚焦时，整个form的边框会变成蓝色并且轻微放大阴影：
.form-box {
border: 1px solid #ccc;
padding: 16px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-box:focus-within {
border-color: #2b7cff;
box-shadow: 0 0 0 3px rgba(43, 124, 255, 0.15);
}
从上面的代码可以看出，我们并没有给input写任何特殊选择器，而是直接对父容器使用:focus-within。只要form里存在input、button、textarea、select等可聚焦元素，并且用户用键盘Tab或者鼠标点进了它们，父容器样式就会立即生效。这种方式比分别给每个子元素写:focus再配合兄弟选择器去影响父级要简洁得多，也避免了层级结构变化时样式失效的问题。
二、常见应用场景与完整示例
focus-within非常适合做表单分组高亮。比如一个登录卡片，里面包含账号和密码输入框，用户进入其中任意一个，整张卡片就视觉突出，告诉用户当前正在这一块操作。另一个典型场景是自定义下拉框：用input模拟搜索框，聚焦时通过父容器的focus-within把隐藏的列表展示出来。
我们来看一个下拉筛选器的实现。HTML结构是一个容器套一个input和一个列表，CSS利用focus-within控制列表显隐，完全不需要JS参与：
<div class="dropdown">
<input type="text" placeholder="搜索水果" />
<ul class="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</div>
.dropdown {
position: relative;
width: 200px;
}
.dropdown .list {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
border: 1px solid #ddd;
background: #fff;
list-style: none;
margin: 4px 0 0;
padding: 0;
}
.dropdown:focus-within .list {
display: block;
}
.dropdown .list li {
padding: 8px 12px;
}
.dropdown .list li:hover {
background: #f0f6ff;
}
这个例子里，input获得焦点后，.dropdown命中focus-within，于是下属的.list从display:none变成block。用户移开焦点，列表自动收起。它的优点在于逻辑完全声明式，维护成本低；缺点是如果需要在点击列表项后保持展开，单靠CSS就不够了，因为点击li不会让input持续聚焦，此时仍需少量JS辅助。
三、兼容性、注意事项与对比分析
focus-within从CSS Selectors Level 4规范进入标准，目前主流浏览器包括Chrome、Edge、Firefox、Safari均早已支持，移动端WebView也基本覆盖。唯一需要考虑的是非常老旧的IE系列完全不支持，如果项目还必须兼容IE，那就只能退回到JS方案或者借助focus事件委托来模拟。
和传统JS控制相比，focus-within在性能和代码量上都有优势。下表简单对比了两种思路：
| 方案 | 实现方式 | 维护成本 | 兼容性 |
|---|---|---|---|
| CSS focus-within | 纯样式声明 | 低 | 现代浏览器 |
| JS监听focus/blur | 脚本切换className | 中高 | 全平台 |
另外要注意，focus-within只响应可聚焦元素，比如input、button、a[href]、select、textarea，以及设置了tabindex的普通元素。如果你希望某个div在内部文字被选中时也触发，那是不行的，必须让内部有真正的焦点控件。还有一点，在嵌套结构中，外层和内层容器可以同时命中各自的focus-within，样式会按层级叠加，这恰好方便我们做多级高亮，比如卡片高亮的同时内部输入框组也高亮。
四、结合其他选择器增强控制
focus-within还能和:not、子代选择器组合，写出更精细的规则。例如只希望在容器内有输入框聚焦、而不是按钮聚焦时才变背景，就可以用:has配合更现代的写法，但在不支持:has的环境里，也可以靠给按钮不加tabindex来间接控制。
下面是一个利用focus-within配合过渡动画提升体验的例子，让父容器在聚焦时平滑浮起：
.card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card:focus-within {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
这种细节处理在后台管理系统和表单密集型页面里很实用，用户每进入一个区块，页面就有轻微回应，既引导了视线，又不会像弹窗那样打断操作。只要记住焦点离开后样式自动还原，就不必担心状态清理问题，这也是纯CSS方案相比手动管理类名最省心的地方。
CSSfocus-within父容器样式控制修改时间：2026-08-01 00:57:32