:focus-within不生效主因是父容器不可聚焦或样式被高优先级规则覆盖；需同时满足父元素设tabindex且子元素原生可聚焦或有tabindex，再通过.form-group:focus-within input等显式选择器控制子元素样式。
:focus-within 触发时子元素样式不更新的常见原因
直接写 :focus-within 但子元素没反应，大概率是父容器本身不可聚焦（比如 div 默认没有 tabindex），或子元素虽获得焦点但样式被更具体的规则覆盖。浏览器只在父元素「真正进入聚焦状态」时才触发该伪类，不是只要子元素有焦点就自动生效。
让父容器可聚焦的两个必要条件
必须同时满足以下两点，:focus-within 才能正常工作：
- 父元素需具备可聚焦能力：添加
tabindex="0"（推荐）或tabindex="-1"（仅支持 JS 聚焦） - 子元素必须是原生可聚焦元素（如
<input>、<button></button>、<a href></a>）或也设置了tabindex
例如：
<div class="form-group" tabindex="0"> <label>用户名</label> <input type="text" name="username"> </div>
此时点击 input 或按 Tab 进入该 div，整个 .form-group 都会匹配 :focus-within。
立即学习“前端免费学习笔记（深入）”；
:focus-within 下修改子元素样式的正确写法
不能只写 .form-group:focus-within { ... } 然后指望内部所有子元素自动变色——必须显式写出目标子元素的选择器。常见错误是漏掉后代/子代关系符。
正确示例（高亮 label 和 input 边框）：
.form-group:focus-within label {
color: #007bff;
}
.form-group:focus-within input {
border-color: #007bff;
outline: none;
}
注意：.form-group:focus-within input 匹配的是「当 .form-group 处于 focus-within 状态时，其内部的 input 元素」，不是「input 自己获得焦点时」——这正是你想要的联动效果。
与 :focus 的关键区别和兼容性提醒
:focus-within 是父级响应子级焦点，:focus 是元素自身响应自身焦点。两者不互斥，但优先级和作用范围完全不同。
- IE 完全不支持
:focus-within，需用 JS 模拟（监听focusin/focusout事件并切换 class） - 若父容器内有多个可聚焦子项，任一获得焦点都会触发
:focus-within，无法区分具体是哪一个 - 某些情况下（如子元素
display: none或visibility: hidden），即使它获得焦点，:focus-within也不会触发
最易忽略的一点：CSS 中如果对子元素写了 input:focus { border: 2px solid red; }，它会比 .form-group:focus-within input 优先级更高，导致后者失效——记得检查 specificity。
