:focus-within是CSS伪类，当元素自身或其任意后代获得焦点时触发；而:focus仅在元素自身获焦时生效，二者核心区别在于:focus-within具备“向下感知”能力，适用于父容器响应子元素聚焦的场景。
什么是 :focus-within，它和 :focus 有什么区别
:focus-within 是一个伪类，当元素自身获得焦点，或其**任意后代元素**获得焦点时，该伪类都会匹配。它不只看自己，而是“向下感知”——这对输入框组（比如带标签、提示文字、图标、错误信息的容器）特别有用。
对比 :focus：后者只在目标元素本身被聚焦时触发，比如只写 input:focus，那么包裹它的 div 不会响应；而 div:focus-within 只要里面任一 input 或 textarea 被点击/Tab 进入，整个 div 就能加样式。
常见误用：把 :focus-within 直接写在 input 上（input:focus-within 永远不生效，因为 input 没有可聚焦的后代）。
怎么给输入框组添加聚焦态视觉反馈
典型结构是一个外层容器（如 div.form-group），内部包含 label、input、可能还有 span.help-text 或 svg.icon。你想让整个组在输入框聚焦时“亮起来”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 确保外层容器是可聚焦的祖先节点（不需要
tabindex，只要它有可聚焦的子元素即可） - 用
.form-group:focus-within选中容器，再修改内部元素样式，比如加边框、提升阴影、移动 label 等 - 避免在
:focus-within中重置所有状态——例如不要用它覆盖.form-group.error:focus-within的错误色，否则错误态会被覆盖
简单示例：
.form-group {
position: relative;
padding: 8px;
border-radius: 4px;
}
.form-group:focus-within {
background-color: #f8f9fa;
box-shadow: 0 0 0 2px #007bff;
}
.form-group label {
transition: transform 0.2s;
}
.form-group:focus-within label {
transform: translateY(-10px) scale(0.85);
}
兼容性与降级处理要注意什么
:focus-within 在 Chrome 60+、Firefox 61+、Safari 15.4+、Edge 79+ 支持良好，但 IE 完全不支持，旧版 Safari（
如果你必须支持旧环境：
- 别依赖 JS 模拟（容易漏掉
click、focusin、focusout所有路径，且影响可访问性） - 用
:focus+ 同级选择器做最小降级：比如input:focus + .label-floating，但仅适用于 label 在 input 后面的结构 - 更稳妥的方式是保留基础态（如默认边框），仅用
:focus-within做增强，不把它当作唯一交互信号
检查是否生效的小技巧：在 DevTools 里手动给 input 执行 focus()，然后看父容器是否被 :focus-within 匹配（Elements 面板里会高亮对应规则）。
为什么有时候 :focus-within 不触发
最常踩的坑不是语法错，而是结构或行为干扰：
- 后代元素没有实际可聚焦能力：比如
div缺少tabindex="-1"，或span被设了pointer-events: none - 聚焦被 JS 中断：比如某个
input的onFocus里调用了blur()，或表单自动跳转逻辑提前移除了焦点 - CSS 层叠覆盖：父容器设置了
contain: strict或content-visibility: hidden，可能阻断焦点传播（虽不常见，但在复杂布局中值得排查） - Shadow DOM 场景下，
:focus-within不跨 shadow boundary —— 如果输入框在自定义组件内，外部容器无法感知其聚焦
调试时优先确认：打开控制台 → 选中那个 input → 输入 $0.matches(':focus') 看是否为 true，再往上查父级是否匹配 :focus-within。
真正难处理的是动态插入的输入框（比如通过 JS append 的 input），它们需要在插入后手动 focus() 一次才能让 :focus-within 正常响应首次聚焦 —— 这点很容易被忽略。
