:focus-within 要想生效，必须作用于具备“可聚焦上下文”的父容器，如加 tabindex="-1" 或使用 fieldset/form 等语义化元素；避免 display: contents、visibility: hidden 或无盒模型的空 div，且高亮宜用 outline 或 box-shadow 而非影响布局的属性。

:focus-within 要想高亮整个表单区域，必须写在能包裹可聚焦子元素的父容器上，且该容器得是“可聚焦上下文”——否则样式永远不会触发。

为什么 .form-group:focus-within 没反应？

根本不是伪类写错了，而是浏览器压根没把父容器当“监听者”：

• .form-group 是纯 div，默认不可参与焦点流，:focus-within 无从监听
• 子 input 外层套了 display: contents 或 visibility: hidden 的 wrapper，焦点链被切断
• label 和 input 是分离结构（label[for="x"] + input#x），但外层没设 tabindex="-1"
• React/Vue 自定义组件里，原生 input 被透传了 tabindex="-1" 或加了 pointer-events: none

怎么写才真正触发 :focus-within

关键不是“加伪类”，而是让父容器具备“感知能力”：

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

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

下载

• 给包裹容器加 tabindex="-1"：不干扰 tab 顺序，只让它成为监听上下文
• 优先用语义化容器，比如 fieldset、form 或 Bootstrap 的 .form-floating（v5.3+ 已内置兼容逻辑）
• 避免用 span 或空 div 包裹 input，确保父容器有盒模型（至少带 padding 或 border）
• 别给整个 form 加 :focus-within，否则点按钮也会高亮，误触率高

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

很多“失效”其实是视觉副作用导致的跳动或覆盖，不是伪类没生效：

• 别在 :focus-within 规则里改 height、margin 或 display——表格中 tr 高度变化会跳动
• 优先用 outline: 2px solid #007bff：不占空间、无重排、符合可访问性要求
• 用 box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加 inset，否则阴影往里缩盖住文字
• IE 完全不支持，旧版 Safari（15.4 之前）也不行；如果项目要跑内网或老系统，必须配 JS fallback 监听 focusin/focusout 并切 class

最常被忽略的是：伪类生效 ≠ 样式可见。容器没盒模型、焦点链被 display: contents 断开、或高亮改了布局属性，都会让你以为它“不工作”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！