如何通过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 只要子树中**任一后代**聚焦即可。