:focus-within不生效的最常见原因是父容器内无可聚焦子元素；必须确保含<input>、<textarea>等默认可聚焦元素或显式设置tabindex="0"，且未被display:none、visibility:hidden或disabled禁用。
:focus-within 能直接实现这个效果，不需要 JavaScript，但必须确保父容器内有可聚焦的子元素（比如 <input>、<textarea> 或带 tabindex 的元素），否则样式不会触发。
为什么 :focus-within 不生效？
最常见原因是：父容器里没有真正可聚焦的元素。例如把 <input> 包在 <div> 里，但 <input> 被 display: none、visibility: hidden 或 disabled 了——这些都会让它失去焦点能力，:focus-within 就不会匹配。
-
<input disabled>→ 不触发:focus-within -
<input style="display:none">→ 不触发 -
<span tabindex="-1">文本</span>→ 可以触发（但需用键盘 Tab 才能聚焦） -
<input>正常渲染且未禁用 → 触发可靠
基础写法与兼容性注意
写法很简单，但要注意浏览器支持：Chrome 60+、Firefox 61+、Safari 15.4+ 支持；旧版 Safari（focus/blur 事件。
.form-group:focus-within {
border-color: #007bff;
box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
}
- 父容器必须是块级元素（如
<div>、<section>），行内元素（如<span>）默认不响应:focus-within - 不要嵌套太深——只要任意后代获得焦点，父容器就匹配，哪怕隔着几层
- 如果父容器本身也设了
tabindex，它自己也能被聚焦，此时:focus-within会额外匹配自身聚焦状态
和 :focus 混用时的常见误判
很多人以为给父容器加 :focus 就能模拟 :focus-within，但这是错的：:focus 只匹配自身获得焦点，而输入框聚焦时父容器并不会自动获得焦点。
立即学习“前端免费学习笔记（深入）”；
-
.form-group:focus→ 点击父容器空白处无反应，Tab 到父容器才生效（需设tabindex） -
.form-group:focus-within→ 点击/Tab 到内部<input>就立刻生效 - 两者同时写时，
:focus-within优先级更高，但逻辑完全不同，别混用作“兜底”
真正要小心的是动态内容：比如用 JS 插入新 <input> 后，如果没正确挂载或初始状态异常，:focus-within 就会静默失效——这时得检查元素是否真实存在于 DOM 且可聚焦，而不是只看 HTML 结构是否“看起来对”。
