:focus-within生效需父元素可聚焦（如form或tabindex="-1"），否则不触发；高亮错位需统一box-sizing:border-box；鼠标点击不触发需检查focus事件冒泡；Safari旧版需JS fallback监听focusin。
:focus-within 触发条件不生效？检查父容器是否可聚焦
:focus-within 只有在父元素**内部任意子元素获得焦点**，且该父元素本身**能参与焦点流（tabindex 可达）或原生可聚焦**时才生效。常见错误是直接套在 div 上却没给它任何聚焦能力。
- ✅ 正确做法：用语义化标签如
form、fieldset作为容器（它们天然支持:focus-within） - ✅ 或显式添加
tabindex="-1"（仅需一次，不干扰 tab 顺序）：<div class="form-group" tabindex="-1">
- ❌ 错误写法：
<div class="form-group"><input></div>—— 默认div不可聚焦，:focus-within永远不会触发
输入框获取焦点后，整个组高亮但边框错位？注意 box-sizing 和 border-collapse
高亮常通过 border 或 outline 实现，但若表单组内含 label、input、error message 等多层元素，边框渲染可能因盒模型不一致而“跳动”或覆盖内容。
- 务必统一设置
box-sizing: border-box到所有相关元素（包括父容器），避免padding+border导致宽度溢出 - 避免对
:focus-within父容器同时使用outline和border—— outline 不占布局空间，容易和 border 重叠或偏移 - 推荐方案：
.form-group:focus-within { border: 2px solid #007bff; }，再配合transition: border-color 0.15s提升响应感
键盘 Tab 进入时高亮正常，但鼠标点击 input 却不触发？检查事件冒泡与 shadow DOM
:focus-within 依赖 focus 事件冒泡。绝大多数情况没问题，但以下场景会中断：
- 子元素设置了
onfocus="event.stopPropagation()"或类似逻辑（极少见，但调试时要排查） - input 被包裹在 Web Component 内部，且 shadow root 使用了
mode: "closed"—— 此时 focus 事件无法穿透到外层容器 - 某些 UI 库（如早期 Ant Design）对
input做了封装，实际聚焦的是内部隐藏input，而外层 wrapper 未同步传递 focus 状态
验证方法：在控制台运行 document.activeElement，点击 input 后看返回值是否为预期的子元素；如果不是，说明焦点被劫持或未正确透出。
立即学习“前端免费学习笔记（深入）”；
需要兼容 Safari 15.4 之前版本？准备降级 fallback
:focus-within 在 Safari 中直到 15.4 才完全稳定（尤其对动态插入的子元素）。如果你的用户仍有较老 macOS/iOS 设备，不能只靠 CSS。
- 降级策略：用 JavaScript 监听
focusin和focusout事件，在父容器上手动增删类名：formGroup.addEventListener('focusin', () => formGroup.classList.add('focused')); - 注意用
focusin（冒泡）而非focus（不冒泡），才能捕获子元素获得焦点的时刻 - 别忘了处理嵌套表单组：用
event.target.closest('.form-group')定位最近父容器，避免误标
真正麻烦的不是写法，而是当表单组里混用了 contenteditable 区域、自定义下拉、或第三方富文本编辑器时，它们的焦点行为往往绕过标准流程 —— 那时候 :focus-within 就只是个优雅的摆设，得靠具体组件的 API 去 hook。
