:focus-within在表单中失效的根本原因是子元素未真正获得焦点，如父元素无tabindex、pointer-events:none或contenteditable="false"等阻碍焦点获取。
为什么 :focus-within 在表单里突然不生效了
常见现象是：点击输入框没反应，开发者工具里也看不到父容器被加上样式。根本原因通常是父元素本身不能获得焦点，而子元素又没正确触发焦点——比如用了 div 包着 input，但 div 没设 tabindex，且子元素没真正获得焦点（例如被 pointer-events: none 挡住，或用了 contenteditable="false"）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
:focus-within不需要父元素可聚焦，只要子元素能获得焦点、且父元素是其祖先即可（哪怕中间隔了几层） - 确保子元素本身支持焦点：标准表单控件（
input、textarea、select、button）默认可聚焦；自定义组件需加tabindex="0" - 避免在父元素或路径上的任意祖先上设置
contain: layout或contain: paint，某些浏览器版本下会截断焦点传播链 - 移动端 Safari 15.4–16.3 存在 bug：当子元素是
input[type="search"]且父元素有overflow: hidden时，:focus-within可能不触发
:focus-within 和 JavaScript 的 focusin 事件谁更可靠
两者目标一致，但行为边界不同：:focus-within 是纯 CSS 状态，依赖浏览器对“焦点进入子树”的判定逻辑；focusin 是事件，能捕获所有焦点进入（包括通过脚本调用 element.focus()），但需要手动绑定和清理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅做样式响应（如展开下拉、高亮边框）优先用
:focus-within——零 JS、无内存泄漏风险、天然支持键盘导航 - 需要执行副作用（如发送埋点、重置错误提示）必须用
focusin，注意监听在父容器上，并用event.target判断是否真进来了子元素 - 不要混用：比如用 JS 主动
focus()后又依赖:focus-within做动画，Safari 15.6 下可能有 1 帧延迟，导致样式和 JS 状态短暂不一致 - IE 完全不支持
:focus-within，focusin在 IE 中可用但事件冒泡行为和现代浏览器略有差异
嵌套 :focus-within 时的样式优先级怎么算
没有特殊规则——它就是普通伪类，优先级只看选择器权重。容易踩坑的是多层嵌套时，你以为外层生效了，其实是内层覆盖了外层样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成
.form-group:focus-within .input-wrapper:focus-within label这种链式写法时，注意它匹配的是“外层有焦点 *且* 内层也有焦点”的 label，不是“外层有焦点时内层的 label” - 想实现“任一子输入框聚焦，整个表单高亮”，就用
.form-group:focus-within单独写样式，别再往里嵌套:focus-within - 如果用 BEM，推荐把状态挂到最外层块上：
.form-group--focused由 JS 控制，比多层:focus-within更可控、更易调试 - Chrome DevTools 的“Styles”面板里，
:focus-within规则不会像:hover那样显示“当前激活”，得手动模拟焦点或看 computed styles 是否应用
哪些场景下 :focus-within 实际不可用
不是所有“需要感知焦点”的地方都适合它。核心限制在于：它只响应原生焦点行为，对非标准交互完全无感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 日期选择器弹层、自定义下拉菜单这类“伪输入”（实际用
div+role="combobox"实现），即使内部按钮可聚焦，:focus-within也不会触发——因为焦点没落在真实可聚焦子元素上 - 使用
contenteditable的富文本区域，若未显式设tabindex="0"，其父容器无法通过:focus-within感知编辑状态 - Web Components 中 Shadow DOM 默认是封闭的，
:focus-within无法穿透 shadow boundary 感知内部焦点，除非用delegatesFocus: true构造选项 - SSR 渲染的页面，服务端不会计算
:focus-within，首次加载时样式不会预置，这点和:hover一样，但容易被忽略
真正难处理的是那些“看起来该触发却没触发”的 case——往往卡在焦点链断裂或 shadow boundary 上，而不是语法写错了。
