:focus-within必须写在父容器上才能生效，用于监听内部可聚焦子元素的焦点状态；若加在input等子元素自身则永不触发。

直接说结论：只要父容器内有可聚焦子元素（比如 <input>、<textarea></textarea>、带 tabindex 的元素），且结构没被意外阻断，一行 :focus-within CSS 就能让整个父级“亮起来”——不用 JS、不操心事件绑定顺序、也不怕点击 <label></label> 时失效。

为什么:focus-within写在父容器上才生效

很多人试了没反应，是因为把 :focus-within 错误地加在了 <input> 自身上。它不是 :focus 的替代品，而是专门设计给“监听者”用的：只有父级（如 <div class="form-group"> 或 <code><label></label>）加这个伪类，才能响应内部任意子元素的焦点状态。

• <input> 用 :focus 就够了；:focus-within 加在它身上永远不触发
• 真正要高亮整行/整块区域，必须写在包裹它的容器上，比如 .form-row:focus-within 或 fieldset:focus-within
• 如果用了自定义组件（如 React 的 <myinput></myinput>），得确保原生 <input> 是可聚焦的，且没被 tabindex="-1" 或 pointer-events: none 拦住

哪些结构会让:focus-within“失灵”

不是写了就一定有效。常见失效原因都和 DOM 焦点链断裂有关：

• 父容器本身是 <span></span> 或纯文本节点，没有盒模型（比如没设 padding、display），样式改了也看不见
• 子 <input> 被套了一层不可聚焦的 <div>，而该 <code><div> 有 <code>visibility: hidden 或 display: contents，导致浏览器无法确认“焦点落在哪里”
• 用了 contenteditable 的 <div> 但没显式设 <code>tabindex="0"，旧版 Firefox 可能不触发
• 在 Shadow DOM 内部使用时，需确保 :focus-within 写在 shadow host 上，且子元素焦点能穿透出来

怎么写高亮样式才不翻车

视觉反馈要明显，但不能破坏布局或引发重排。重点避开几个坑：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 别在 :focus-within 规则里改 height、margin 或 display —— 表格中 <tr> 高度变化会导致整行跳动 <li>优先用 <code>outline（如 outline: 2px solid #007bff）：不占空间、无重排、键盘导航友好
• 要用阴影，选 box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加 inset，否则会往里缩盖住文字
• 背景色微调可以，但避免用 background-color: transparent 这种可能被继承覆盖的写法，明确写死值

兼容性与降级方案的关键细节

Chrome 65+、Firefox 61+、Safari 15.4+ 都支持，但 IE 完全不支持——这点容易被忽略，尤其在企业内网项目中。

• 如果必须兼容 IE，不能只靠 :focus-within；得用 JS 监听 focusin/focusout 并手动切 class
• :focus-within 在 :has() 内部可用（如 div:has(input:focus-within)），但反过来不行，别写成 input:focus-within:has(+ button)
• 移动端 Safari 对 contenteditable + :focus-within 组合偶尔有延迟，建议加 transition-delay: 0.01s 微调感知
• 焦点从一个 :focus-within 区域移出后，若父容器被 display: none，再显示时不会自动恢复高亮——这是浏览器焦点机制决定的，不是 bug