:focus无法作用于父元素，因为父元素本身通常不可聚焦（无tabindex、非表单控件），且:focus不冒泡；而:focus-within专为解决“子元素获焦时父容器响应”而设计，需写在父容器上，依赖子元素可聚焦（如input、button或带tabindex的元素）。
为什么 :focus 无法作用于父元素
直接给父容器写 :focus 不生效，因为父元素本身通常不可聚焦（没有 tabindex、不是表单控件、未显式声明可聚焦）。浏览器只对主动获得焦点的元素触发 :focus，不会向上冒泡。很多开发者卡在这一步，误以为是选择器写错或样式优先级问题。
真正需要的是“只要子元素获得焦点，父元素就响应样式变化”——这正是 :focus-within 的设计目的。
:focus-within 的实际触发条件
它在以下任一情况成立时激活父元素样式：
- 子元素是原生可聚焦元素（如
<input>、<button>、<a href>）且已获得焦点 - 子元素设置了
tabindex="0"或tabindex="-1"并被 JavaScript 主动调用.focus() - 子元素内部还有嵌套可聚焦元素（例如下拉菜单里的
<input>），只要其中任意一个获得焦点，外层父容器都会匹配:focus-within
注意：点击触发聚焦（比如点进输入框）会自动激活 :focus-within；但仅鼠标悬停或触摸（不触发焦点）不会。
立即学习“前端免费学习笔记（深入）”；
与 :hover 和 :active 的关键区别
很多人想靠 :hover 模拟“点击后保持状态”，这是错的：:hover 随鼠标移出立即消失，:active 只在鼠标按下瞬间生效，都不保存焦点状态。
:focus-within 是唯一能持续响应“当前是否有子元素处于焦点中”这一语义的状态伪类。典型适用场景包括：
- 表单区域高亮（整个
<div class="form-group">在内部<input>聚焦时加边框） - 导航菜单展开后，父级菜单项保持视觉反馈（避免用户迷失在多层结构中）
- 卡片式组件中，当用户聚焦到卡片内任一操作按钮时，整张卡片提升 z-index 或添加阴影
兼容性需留意：IE 完全不支持，Edge 79+、Chrome 60+、Firefox 61+、Safari 15.4+ 支持良好；如需兼容旧版 Safari（focusin/focusout 手动增删类名。
容易忽略的 DOM 结构陷阱
:focus-within 对 HTML 结构敏感，常见失效原因：
- 父元素被
overflow: hidden截断，导致子元素焦点行为异常（尤其配合position: absolute下拉内容时） - 子元素被
display: none或visibility: hidden遮盖，即使 JS 调用了.focus()，也不会触发:focus-within（因为不可见元素不能获得焦点） - 使用了 Shadow DOM 且未在
:host或::slotted中正确透传焦点（此时需在 shadow root 内部处理） - 父元素设了
pointer-events: none—— 这会阻止所有交互，包括焦点传递
验证是否生效最简单的方法：打开 DevTools，在 Elements 面板中手动选中子元素，按 Tab 键看焦点是否进入、父元素是否实时匹配 :focus-within 样式。
复杂交互里，别只依赖 CSS；当涉及动态插入内容、第三方组件嵌套或键盘导航逻辑时，:focus-within 可能被绕过，这时候得补一层 focusin 事件监听做兜底。
