如何通过CSS :has(:focus)属性为包含焦点元素的容器实现高亮显示？

本文共计704个文字，预计阅读时间需要3分钟。

plaintext使用`:focus`伪类选择器可以让父容器响应子元素的聚焦状态，但直接写`.container:has(:focus)`几乎总是无效——因为`:focus`伪类只匹配自身获得焦点的元素，而容器本身通常不会聚焦。只有子元素聚焦时，容器才会表现出聚焦效果。

为什么 .container:has(:focus) 不生效

这个写法语义是“选择自身处于 :focus 状态的 .container”，但除非你给 .container 加了 tabindex，否则它根本不会触发 :focus。实际需求是“当子 input 聚焦时，高亮其父容器”，必须明确写出子元素路径。

• .container:has(input:focus) ✅ 匹配含聚焦 input 的容器
• .container:has(.k-input-solid:focus-within) ✅ 更稳妥，兼容内部嵌套 input 的封装组件（如 Kendo）
• .container:has(:focus) ❌ 容器没加 tabindex 就永远不匹配

:focus vs :focus-within：选哪个更可靠

用 :focus 要求子元素**自身**获得焦点；用 :focus-within 只要子树中**任一后代**聚焦即可。多数表单场景推荐后者，尤其当输入框被包裹在 div、span 或 Shadow DOM 内时。

• 结构为 <div class="container"><input></div> → .container:has(input:focus) 可用
• 结构为 <div class="container"><div><input></div></div> → 必须用 .container:has(:focus-within) 或 .container:has(div input:focus)
• :focus-within 在 Safari 15.4+ 支持良好，且比多层 :has() 嵌套性能更好

容易忽略的兼容性与降级处理

:has() 在 Chrome 105+、Firefox 121+、Safari 15.4+ 可用，但 iOS 15.6 及更早版本完全不支持。不能只靠它做关键交互逻辑。

立即学习“前端免费学习笔记（深入）”；

• 用 @supports selector(:has(*)) 包裹样式，避免旧浏览器解析失败崩溃
• 降级方案保留 JS 切换 class：监听 focusin/focusout 事件，给容器加 is-focused
• 注意 display: none 的子元素不会被 :has() 匹配——哪怕它代码里写了 input，只要没渲染，就等于不存在

真正麻烦的不是写对选择器，而是确认 DOM 结构是否稳定、子元素是否始终在渲染树中、以及旧版 Safari 用户是否能接受无高亮——这些比语法本身更影响上线决策。