:focus-within失效的根本原因是父容器不可聚焦，需加tabindex="-1"或使用语义化标签；子元素必须真正可聚焦且无pointer-events:none等拦截；样式避免触发重排，移动端需JS兜底。
为什么 .form-group:focus-within 没反应
根本不是伪类写错了，而是 .form-group 这个 div 默认不可聚焦，浏览器压根不把它纳入焦点传播链。它不是“监听者”，只是个普通盒子。:focus-within 不要求父容器自己被 tab 进去，但必须处于“可聚焦上下文”中——要么是原生支持的语义化标签（如 form、fieldset），要么显式加 tabindex="-1"。
-
✅ 有效写法：
<div class="form-group" tabindex="-1"><input></div> -
❌ 失效写法：
<div class="form-group"><input></div>（没tabindex，无上下文） -
⚠️ 假设生效但实际失效：用了
display: contents或visibility: hidden包裹input，焦点链被浏览器判定为“断裂”
怎么确保子元素真能获得焦点
就算父容器加了 tabindex="-1"，如果里面那个 input 本身不可聚焦，:focus-within 依然静默。常见拦路虎有：
-
input[disabled]→ 完全失去焦点能力 -
input外层套了pointer-events: none的 wrapper → 点击穿透，焦点落不到 input 上 - React/Vue 自定义组件里，原生
input被透传了tabIndex="-1"或style.pointerEvents = "none" -
label和input是分离结构（label[for="x"] + input#x），但点击 label 后焦点没落到 input 上（检查 DevTools 的 Elements 面板，看蓝色高亮是否在 input 上）
高亮样式一改就翻车的三个地方
很多“失效”其实是视觉反馈崩了，不是伪类没触发。浏览器渲染时，某些属性会强制重排或破坏键盘导航流：
- 别在
.form-group:focus-within里改height、margin、display或padding—— 表格中tr高度突变会整行跳动；嵌套结构里改padding可能撑开容器、盖住文字 - 优先用
outline: 2px solid #007bff：不占空间、无重排、键盘用户能清晰看到焦点位置 - 要用阴影，写成
box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加inset，否则往里缩会遮挡输入框内容
移动端和老浏览器要特别当心
iOS Safari 在软键盘弹出瞬间就应用 :focus-within 样式，但视口还没稳定，常导致高亮区域被顶出屏幕或错位。而 IE 完全不支持，Safari 15.4 之前版本也有兼容问题。
立即学习“前端免费学习笔记（深入）”；
- 防错位：监听
visualViewport?.addEventListener('resize', handler)，当高度突降 >150px 时，临时移除高亮类或用transform: translateY()微调 - 兜底方案：对老 Safari（15.4 以下）不能只靠 CSS，得用 JS 监听
focusin事件，在父容器上手动切is-focused类 - 别给整个
form加:focus-within：点提交按钮也会触发，误高亮率高
:focus-within 才算真正落地可用。 
