:focus-within必须写在可聚焦的父容器上，需加tabindex="-1"，子元素须真实可聚焦；否则伪类不触发。高亮推荐outline或外阴影，禁用影响布局的属性。
直接说结论： :focus-within 必须写在父容器上，且该容器必须能参与焦点流（比如加 tabindex="-1"），内部子元素（如 <input>）必须真实可聚焦——否则样式永远不会触发。
为什么 .form-group:focus-within 没反应？
最常见原因是：<div class="form-group"> 默认不可聚焦，浏览器不把它当“焦点上下文”，所以即使子 <code><input> 获焦，伪类也不匹配。
- ✅ 正确做法：给父容器显式声明
tabindex="-1"（仅需一次，不影响 tab 顺序） - ❌ 错误写法：
<div class="form-group"> 纯静态 div，没任何聚焦能力 <li>⚠️ 注意：不要给整个 <code><form></form>加:focus-within，否则点提交按钮也会触发，容易误高亮 - ? 检查方法：DevTools 中点击输入框后，看焦点是否真落在
<input>上（而不是外层 div），若焦点被tabindex="-1"或pointer-events: none拦住，:focus-within就失效 - ✅ 推荐用
outline: 2px solid #007bff：不占空间、无重排、键盘导航友好 - ✅ 若用阴影，选
box-shadow: 0 0 0 2px rgba(0,123,255,0.25)；别加inset，否则往里缩会盖住内容 - ❌ 避免在
:focus-within规则里改height、margin、display或padding—— 表格中<tr> 高度变化会导致整行跳动，嵌套结构里改 <code>padding可能撑开边框 - ? 提前统一
box-sizing: border-box，避免border+padding导致宽度溢出 - ✅ 确保渲染出的原生
<input>没被透传tabIndex="-1"或pointer-events: none - ✅ 若用
<label></label>包裹，必须是祖先-后代关系（<label><input></label>或<label for="x"></label><input id="x">），否则点击 label 不会触发:focus-within - ⚠️ 注意：Shadow DOM 内使用时，
:focus-within必须写在 shadow host 上，且子元素焦点需能穿透出来 - ❌ 别用
display: contents或visibility: hidden包裹子元素，浏览器无法确认焦点落点，伪类直接失活
怎么写高亮样式才不翻车？
视觉反馈要明显，但不能改布局、不能重排、不能挡住文字。
React/Vue 中自定义组件怎么用？
框架组件本身不是原生可聚焦元素，:focus-within 不会穿透到虚拟 DOM 层。
真正难的不是写对选择器，而是确保整个焦点链畅通——从用户点击开始，到 input 获焦，再到父容器感知，每一步都可能被样式、属性或框架封装悄悄截断。
