:focus-within没反应的最常见原因是焦点未落到合法可聚焦子元素上；必须有子元素真实获得焦点，其父容器才能匹配该伪类，且需确保焦点传播路径完整、子元素未被禁用或隐藏。
为什么写了 :focus-within 却没反应？
最常见原因是焦点根本没落到合法的可聚焦子元素上。浏览器只认“此刻有没有焦点”，不认“能不能被聚焦”。:focus-within 不是监听点击，而是监听真实焦点事件——必须有元素处于 :focus 状态，它的祖先才能匹配 :focus-within。
以下情况会直接导致失效：
-
input被设了tabindex="-1"或pointer-events: none，拦住了焦点进入 - 父容器用了
display: contents或contain: layout，打断了焦点传播路径 - 子元素被
display: none或visibility: hidden遮盖，焦点无法到达 -
label和input是分离结构（<label for="x"></label><input id="x">），但没用 JS 主动.focus()，点击 label 不会触发 input 聚焦
:focus-within 必须写在哪个元素上？
只能写在包裹可聚焦子元素的**直接或间接父容器**上，不能写在 input、textarea 自身，也不能写在太顶层（如 body）。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="form-item"> <label>邮箱</label> <input type="email"> </div>
对应 CSS：
.form-item:focus-within {
outline: 2px solid #007bff;
}
错误写法包括：
-
input:focus-within—— 子元素自身无法监听自己获焦 -
.form-item div:focus-within—— 选中的是内部某个div，不是父容器 -
body:focus-within—— 太宽泛，任意按钮点击都会触发，无实际意义
哪些子元素能真正触发 :focus-within？
只有浏览器认定“当前拥有焦点”的元素才有效。默认可聚焦的 HTML 元素包括：input、textarea、select、button、a[href]；手动赋予聚焦能力的包括：div[tabindex="0"]、span[tabindex="0"]、div[contenteditable="true"][tabindex="0"]。
以下情况不会触发：
-
div[tabindex="-1"]没被 JS 显式调用.focus() -
input[disabled]或input[readonly]（部分浏览器下 readonly 可聚焦但不触发伪类） - 自定义组件里原生
input被封装后加了tabindex="-1"且未透传焦点
如何兼容老浏览器（比如 iOS 15.4 及更早 Safari）？
截至 2026 年 11 月，:focus-within 在 Chrome 60+、Firefox 61+、Edge 79+、Safari 15.4+ 均稳定支持，但 iOS 15.4 及更早版本 Safari 仍缺失，IE 完全不支持。
JS fallback 必须用 focusin/focusout，因为它们冒泡，能捕获子元素的聚焦事件：
const container = document.querySelector('.form-group');
container.addEventListener('focusin', () => container.classList.add('focused'));
container.addEventListener('focusout', () => container.classList.remove('focused'));
注意：focus/blur 不冒泡，绑定在父容器上收不到子元素信号。
真正容易被忽略的点是：别只盯着 CSS 写法，先确认焦点链是否完整——检查是否有 outline: none 遮蔽了视觉反馈、pointer-events: none 拦截了鼠标聚焦、或者父容器意外设置了 contain: layout 阻断传播。这些比语法错误更难排查。
