:focus-within能直接监听父容器内任意子元素获焦状态，无需js，但前提是子元素必须可聚焦（如input、button、带tabindex的元素）；若子元素不可聚焦（如无tabindex的span）、被display:none隐藏或浏览器不支持（如ie），则伪类永不生效。
:focus-within 能直接监听父容器内任意子元素获得焦点的状态，无需 JavaScript，但必须确保子元素本身是可聚焦的（比如 <input>、<button></button>、带 tabindex 的元素），否则伪类永远不会触发。
为什么 :focus-within 没生效？常见聚焦条件遗漏
最常踩的坑是子元素默认不可聚焦。例如 <div><span>文本</span></div> 中的 <span></span> 永远不会触发 :focus-within，因为它既不是表单控件，也没有 tabindex。
- 可聚焦的原生元素包括：
<input>、<textarea></textarea>、<button></button>、<select></select>、<a href></a> - 普通容器（
<div>、<code><span></span>）需显式加tabindex="0"或tabindex="-1"才能被聚焦（tabindex="0"参与自然 tab 顺序，tabindex="-1"仅支持 JS 聚焦） - 如果子元素被
display: none或visibility: hidden，即使聚焦了也不会触发:focus-within - 如需兼容 Safari :focus-within 用在
contenteditable父容器上 - 服务端渲染或 SSR 场景下，注意不要依赖
:focus-within做关键交互状态判断（比如表单校验提示是否显示），它只适合视觉反馈 - 若必须支持老浏览器，可用 JS 监听
focusin和focusout事件，在父元素上切换类名（js-focus-within），再用.card.js-focus-within模拟
实际可用的 HTML 结构示例
下面这段结构能让外层 <div class="card"> 在任意子输入框或按钮聚焦时激活样式：
<pre class="brush:php;toolbar:false;"><div class="card">
<h3>用户信息</h3>
<input type="text" placeholder="姓名"><input type="email" placeholder="邮箱"><button>提交</button>
</div>
<style>
.card:focus-within {
box-shadow: 0 0 8px rgba(0, 100, 255, 0.3);
border-color: #0064ff;
}
</style></pre>
<p>注意：不需要给每个子元素加事件监听，也不需要 JS 控制类名，纯 CSS 响应。</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>
<h3>兼容性与降级处理要点</h3>
<p><code>:focus-within 在现代浏览器中支持良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），但 IE 完全不支持，旧版 Safari（contenteditable 内聚焦不触发）。
真正要注意的是：子元素是否真的获得了焦点——有时候你以为它聚焦了，其实是被 pointer-events: none 阻断，或者父层有 contain: layout 干扰了焦点传播。先检查 document.activeElement 是谁，再排查样式。
