:focus-within 必须写在能包含可聚焦后代的父容器上才生效，input 等叶子节点无法触发；父容器需具备可聚焦上下文（如加 tabindex="-1" 或使用 form/fieldset），且样式避免引发重排。

:focus-within 必须写在父容器上才生效，加在 input 上永远没反应。

为什么 .input:focus-within 永远不触发

浏览器根本不会匹配这个写法——:focus-within 不是 :focus 的替代品，它只对“能包含可聚焦后代”的祖先元素起作用。input 是叶子节点，没有后代，所以伪类被直接忽略。

• 错误写法：.input:focus-within、input:focus-within
• 正确目标：包裹 input 的 div、label、fieldset 或 form
• 检查 DevTools 元素面板，确认焦点是否真落在 input 上（而不是外层 div 被 JS 抢了焦点）

父容器没加 tabindex="-1" 就失效

纯 div 默认不在焦点流中，:focus-within 不会计算它——这不是 bug，是规范行为。它不要求父容器被 tab 进去，但必须处于“可聚焦上下文”里。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 推荐：<div class="form-group" tabindex="-1"> —— 仅需一次，不干扰 tab 顺序 <li>❌ 错误：<code><div class="form-group"> —— 没有任何聚焦能力，伪类永不匹配 <li>语义化标签如 <code>form、fieldset 天然支持，不用额外加 tabindex
• 别给整个 form 加 :focus-within，点任意按钮也会触发，容易误高亮

高亮样式一改 margin 或 height 就翻车

很多“失效”其实是视觉副作用导致的：重排、跳动、覆盖文字、边框错位。这些不是伪类没生效，而是样式破坏了渲染稳定性。

• 优先用 outline: 2px solid #007bff：不占空间、无重排、键盘导航友好
• 要用阴影，选 box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加 inset，否则往里缩盖住内容
• 避免在 :focus-within 规则里改 height、margin、display 或 padding
• 统一所有相关元素的 box-sizing: border-box

React/Vue 自定义组件里容易漏掉的点

封装的 <myinput></myinput> 组件若内部 input 被设了 tabindex="-1" 或 pointer-events: none，焦点链就断了，:focus-within 自然不触发。

• 确保原生 input 渲染出来且未被样式或属性拦截
• label 和 input 必须构成祖先-后代关系（<label><input></label> 或 <label for="x"></label><input id="x">）
• 若用 display: contents 或 visibility: hidden 包裹子元素，焦点链断裂，伪类照样失效
• Shadow DOM 内使用时，:focus-within 必须写在 shadow host 上，且子元素焦点需能穿透出来

真正要让表单区域联动高亮，关键不是写对伪类，而是确认焦点链完整、容器有上下文、样式不破坏布局——三者缺一不可。