:focus-within必须写在父容器上才生效，因其设计目标是让父级感知后代焦点；若加在input等子元素自身则永不触发，而父容器内只要有可聚焦子元素获焦，样式即自动生效。

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

因为:focus-within不是用来“聚焦自己”的，而是让父级“感知子级焦点”。它必须作用于包裹、或<button>的容器（比如<div class="form-group">或<fieldset>），浏览器才会监听其后代树中的焦点变化。如果你把它加在<input>上，比如<code>input:focus-within</code>，那永远不触发——<code>input</code>自己用<code>:focus</code>就够了。 <h3>哪些结构会让:focus-within“失灵”</h3> <p>失效往往不是语法错，而是焦点链被意外切断：</p> <ul> <li> <code>tabindex="-1"</code>加在子<input>上：键盘无法抵达，:focus-within就收不到信号</li> <li>父容器或中间某层用了<code>contain: layout</code>或<code>contain: paint</code>：某些 Chrome 版本会截断焦点传播</li> <li>子元素被<code>pointer-events: none</code>盖住，或者外层<code>div</code>设了<code>visibility: hidden</code>：浏览器无法确认焦点落在哪棵子树</li> <li>iOS Safari 15.4–16.3 中，<code>input[type="search"]</code> + 父级<code>overflow: hidden</code>组合会丢事件</li> </ul> <h3>怎么写高亮样式才不破坏可访问性</h3> <p>视觉反馈要强，但不能牺牲键盘导航体验：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>别改<code>height</code>、<code>margin</code>或<code>display</code>：Safari 下可能引发焦点丢失或布局抖动</li> <li>优先用<code>outline</code>（如<code>outline: 2px solid #007bff</code>）：不占空间、无重排、WCAG 合规</li> <li>要用<code>box-shadow</code>，选<code>box-shadow: 0 0 0 2px rgba(0,123,255,0.25)</code>，别加<code>inset</code>——否则阴影往里缩，盖住文字</li> <li>背景色微调可以，但避免<code>background-color: transparent</code>：继承链可能覆盖它，明确写死值更稳</li> </ul> <h3>兼容性与降级的真实成本</h3> <p>Chrome 65+、Firefox 61+、Safari 15.4+ 都支持，但 IE 完全不支持——这点在企业内网项目里常被跳过测试。如果必须兼容 IE 或旧 Safari，光靠 CSS 不行；得用<code>focusin</code>/<code>focusout</code>事件手动切 class，且要注意事件绑定在父容器上，再用<code>event.target</code>判断是否真进了子元素。嵌套多层:focus-within时，样式覆盖只看选择器权重，不是“越外层越优先”，容易误以为外层生效了，其实是内层规则把外层盖掉了。</p> </fieldset> </div></button>

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