:focus-within能直接监听父容器内任意子元素获焦状态，无需JS，但前提是子元素必须可聚焦（如input、button、带tabindex的元素）；若子元素不可聚焦（如无tabindex的span）、被display:none隐藏或浏览器不支持（如IE），则伪类永不生效。
:focus-within 能直接监听父容器内任意子元素获得焦点的状态，无需 JavaScript，但必须确保子元素本身是可聚焦的（比如 <input>、<button>、带 tabindex 的元素），否则伪类永远不会触发。
为什么 :focus-within 没生效？常见聚焦条件遗漏
最常踩的坑是子元素默认不可聚焦。例如 <div><span>文本</span></div> 中的 <span> 永远不会触发 :focus-within，因为它既不是表单控件，也没有 tabindex。
- 可聚焦的原生元素包括：
<input>、<textarea>、<button>、<select>、<a href> - 普通容器（
<div>、<span>）需显式加tabindex="0"或tabindex="-1"才能被聚焦（tabindex="0"参与自然 tab 顺序，tabindex="-1"仅支持 JS 聚焦） - 如果子元素被
display: none或visibility: hidden，即使聚焦了也不会触发:focus-within
实际可用的 HTML 结构示例
下面这段结构能让外层 <div class="card"> 在任意子输入框或按钮聚焦时激活样式：
<div class="card">
<h3>用户信息</h3>
<input type="text" placeholder="姓名">
<input type="email" placeholder="邮箱">
<button>提交</button>
</div>
<style>
.card:focus-within {
box-shadow: 0 0 8px rgba(0, 100, 255, 0.3);
border-color: #0064ff;
}
</style>
注意：不需要给每个子元素加事件监听，也不需要 JS 控制类名，纯 CSS 响应。
立即学习“前端免费学习笔记（深入）”；
兼容性与降级处理要点
:focus-within 在现代浏览器中支持良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），但 IE 完全不支持，旧版 Safari（contenteditable 内聚焦不触发）。
- 如需兼容 Safari :focus-within 用在
contenteditable父容器上 - 服务端渲染或 SSR 场景下，注意不要依赖
:focus-within做关键交互状态判断（比如表单校验提示是否显示），它只适合视觉反馈 - 若必须支持老浏览器，可用 JS 监听
focusin和focusout事件，在父元素上切换类名（js-focus-within），再用.card.js-focus-within模拟
真正要注意的是：子元素是否真的获得了焦点——有时候你以为它聚焦了，其实是被 pointer-events: none 阻断，或者父层有 contain: layout 干扰了焦点传播。先检查 document.activeElement 是谁，再排查样式。
