:focus-within 在父元素的任意可聚焦后代获得焦点时触发，无论父元素是否有 tabindex；可聚焦后代包括表单控件、tabindex≥0 的元素或通过 JS 调用 focus() 的元素。
focus-within 伪类的触发条件是什么
:focus-within 不是让父元素“获得焦点”，而是当父元素**内部任意后代元素获得焦点**（且该后代可聚焦）时，父元素才匹配该伪类。这意味着：父元素本身 tabindex 值无关紧要；真正起作用的是子元素是否可聚焦（如 <input>、<button></button>、带 tabindex="0" 的 <div> 等）。
<p>常见误判：给父容器加 <code>tabindex="-1" 后点击它，:focus-within 并不生效——因为点击本身不触发焦点，除非你用键盘 Tab 进入或显式调用 .focus()。
哪些子元素能触发 :focus-within
只有满足以下任一条件的后代元素获得焦点时，父元素才会匹配 :focus-within：
-
<input>、<textarea></textarea>、<select></select>、<button></button>（默认可聚焦） - 显式设置
tabindex="0"或正整数的元素（如<div tabindex="0">） <li>通过 JavaScript 调用 <code>.focus()且该元素可接收焦点（即不被disabled或display: none阻断） - 不能用于伪元素（如
div:focus-within::before合法，但div:focus-within::placeholder无效） - 若父元素设置了
overflow: hidden且聚焦子元素超出可视区，焦点状态仍存在，:focus-within依然匹配 - 嵌套使用时，多个层级可能同时匹配（如
.form:focus-within .field:focus-within），需注意层叠优先级 - 与
:focus混用时，:focus-within优先级相同，但更宽泛——子元素聚焦时，父元素的:focus-within和子元素自身的:focus可同时生效
注意：tabindex="-1" 的元素可通过 JS 聚焦，但无法通过 Tab 键进入，仍可触发 :focus-within；而 visibility: hidden 或 opacity: 0 的元素只要未被移除 DOM 且可聚焦，也能触发。
立即学习“前端免费学习笔记（深入）”；
实际样式调整中容易忽略的兼容性与限制
:focus-within 在现代浏览器中支持良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），但旧版 Safari（
关键限制点：
示例：下拉菜单展开态控制
.dropdown {
position: relative;
}
.dropdown:focus-within .dropdown-menu {
opacity: 1;
visibility: visible;
}
.dropdown-menu {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
调试 focus-within 不生效的典型原因
如果写了 parent:focus-within { ... } 却没反应，先检查这些：
- 子元素是否真的获得了焦点？打开浏览器开发者工具 → Elements 面板 → 选中子元素，看右侧面板的 “Focus” 是否打钩
- 子元素是否被
disabled或readonly（部分情况下会阻止焦点） - 父元素是否被
display: none或pointer-events: none阻断了事件流（不影响:focus-within匹配，但可能影响手动聚焦） - CSS 选择器优先级是否被更高权重的规则覆盖（比如内联
style或!important规则） - 是否在 Shadow DOM 内部使用？
:focus-within跨 Shadow Boundary 时行为受限，需确保聚焦发生在同一影子树内
复杂交互中，:focus-within 很方便，但它依赖真实的焦点流程；一旦涉及模态框、动态插入内容或第三方组件（如富文本编辑器），焦点管理容易失控——这时往往得回退到 JS 监听 focusin/focusout 事件来补位。
