CSS\_has与focus-within实现父级背景变化

本文深入剖析了CSS中:focus-within与:has(.child:focus)两种伪类在实现父级元素响应子元素聚焦时的核心差异：前者是原生、高性能、开箱即用的解决方案，能自动捕获任意嵌套层级的可聚焦后代（如input、button、tabindex元素），兼容性好且无需额外标记；后者虽更精确但依赖严格的DOM结构、较差的浏览器支持（尤其Safari）、显著的性能开销，且极易因焦点状态失效、shadow DOM隔离或选择器写法错误而失灵——对于绝大多数“父容器随输入框聚焦变色”的场景，:focus-within才是更轻量、可靠、无障碍友好的首选，而过度依赖:has()不仅增加复杂度，还可能引入难以调试的交互缺陷。

focus-within 能直接替代 :has(.child:focus) 吗？

不能。:focus-within 是原生支持的伪类，:has() 是较新的选择器（Chrome 105+、Firefox 107+），两者行为不同但常被混淆。
:focus-within 只要任意后代获得焦点（包括 input、button、带 tabindex 的元素），父元素就匹配；而 :has(.child:focus) 要求指定子选择器内存在处于 :focus 状态的元素，更精确但也更受限。

• :focus-within 不需要额外标记，开箱即用
• :has(.child:focus) 必须确保目标子元素确实能获得焦点（比如 div 默认不可聚焦，得加 tabindex="0"）
• Safari 15.4+ 才支持 :has()，且不支持在 @keyframes 或 transition 中使用它

常见错误：写 div:has(input:focus) { background: yellow; } 却发现没反应——很可能因为 input 被包裹在 label 或 fieldset 里，导致实际匹配的不是直接子级，而是更深的后代。

如何让父容器响应 input 聚焦并改变背景？

最稳妥、兼容性最好的做法是用 :focus-within：

form {
  background: #f9f9f9;
  padding: 1rem;
}
form:focus-within {
  background: #e6f7ff;
}

• 它自动捕获所有可聚焦后代（input、textarea、select、button、[tabindex]）
• 不依赖 DOM 层级，哪怕 input 套了三层 div 也生效
• 不需要 JS 监听或 class 切换，纯 CSS

如果非要用 :has()（例如只响应某个特定 class 的输入框），注意写法必须严格匹配结构：

.card:has(.trigger-input:focus) {
  background: #fff8e1;
}

• .trigger-input 必须真实存在于该 .card 内部（可以是任意后代，不限直接子）
• 若用 .card:has(> .trigger-input:focus)，则要求必须是直接子元素，否则失效

为什么 :has(.input:focus) 有时不触发？

根本原因通常是焦点没真正落在目标元素上，或浏览器不支持/解析失败：

• input 被禁用（disabled）或只读（readonly）→ 无法获得焦点 → :focus 不匹配 → :has() 不生效
• 父元素设置了 pointer-events: none 或 contain: layout，可能干扰焦点传播（少见但存在）
• 使用了自定义组件（如 React 封装的 Input），实际渲染的 input 被套在 shadow DOM 或 portal 中 → :has() 无法跨边界匹配
• CSS 优先级问题：另一个更具体的规则覆盖了你的 :has() 样式，用 DevTools 检查 computed styles 确认是否“已匹配但被覆盖”

调试建议：先临时加上 outline: 2px solid red 到 input:focus，确认焦点确实进去了；再检查父元素是否真的匹配了 :has() —— Chrome DevTools 的 Elements 面板会高亮显示匹配的节点（带 :has 标记）。

focus-within 和 :has() 在性能与语义上的差异

:focus-within 是浏览器原生优化过的伪类，几乎无性能损耗；而 :has() 是“关系型选择器”，浏览器需对每个候选父元素遍历其整个子树来判断条件，复杂页面中可能导致样式计算变慢（尤其配合动画或频繁重排时）。

• 如果只是想“表单获得焦点时高亮”，用 :focus-within 更轻量、更可靠
• 如果逻辑是“当右侧操作区有按钮聚焦时才激活左侧菜单背景”，且该按钮不在同一 DOM 子树下（比如通过 aria-controls 关联），那 :has() 也无能为力，必须靠 JS

容易被忽略的一点：:focus-within 对键盘用户友好，但对鼠标点击后不触发 focus 的情况（比如某些自定义下拉）无效；而 :has() 也无法监听 click，它只响应伪类状态变化。真要兼顾所有交互方式，CSS 单独做往往不够。

终于介绍完啦！小伙伴们，这篇关于《CSS\_has与focus-within实现父级背景变化》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！