不能。:focus-within 匹配任意可聚焦后代获得焦点的父元素，开箱即用且性能优；:has(.child:focus) 需目标子元素真实可聚焦并严格满足结构关系，兼容性差、性能开销大。
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 单独做往往不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
