HTML中如何使用:focus-within检测子元素获取焦点

:focus-within是CSS伪类，当元素自身或其任意后代获焦时匹配，用于表单高亮、下拉菜单维持展开等场景，免JS监听且天然支持键盘导航。

什么是 :focus-within，它能解决什么问题

:focus-within 是一个 CSS 伪类，当元素自身获得焦点，或其任意后代元素获得焦点时，该伪类就匹配成功。它最常用于表单容器、下拉菜单、卡片等需要“整体响应子元素聚焦”的场景——比如点击输入框时高亮整个表单区域，或聚焦到下拉项时保持菜单展开。

它不是 JavaScript 的替代品，但能用纯 CSS 实现原本需要监听 focusin 事件的视觉反馈，且天然支持键盘导航（Tab 切换）。

基本用法：给父容器加样式，子元素一聚焦就生效

关键点在于：父元素必须是可聚焦的“容器”，不一定要加 tabindex；只要它的某个子元素（如 <input>、<button>、<textarea> 等原生可聚焦元素）获得焦点，父元素上的 :focus-within 就会触发。

<div class="form-group">  <label>邮箱</label>  <input type="email" name="email"></div>

.form-group:focus-within {  border: 2px solid #007bff;  border-radius: 4px;}

• 子元素必须是真正可聚焦的：普通 <span> 或 <div> 默认不可聚焦，除非显式设置 tabindex="0"
• 不需要给父元素加 tabindex —— 它只是“接收”子元素的聚焦状态，本身不必可聚焦
• :focus-within 会冒泡，但只作用于直接匹配的祖先，不会跨 Shadow DOM（除非使用 :focus-within 在影子根内）

常见失效原因：为什么加了没反应

:focus-within 看似简单，但几个细节极易踩坑：

立即学习“前端免费学习笔记（深入）”；

• <input> 被包裹在 <label> 内，但用了 for + id 关联方式，而没把 <input> 放进 <label> 标签内部 —— 这时聚焦 label 不会让 input 获得焦点，自然也不会触发父级 :focus-within
• 使用了 display: none 或 visibility: hidden 的子元素：隐藏元素无法获得焦点，也就不会激活 :focus-within
• 表单控件被禁用：disabled 状态的 <input> 不可聚焦，即使它在 DOM 中
• 某些旧版 Safari（<15.4）对 :focus-within 的支持不完整，尤其是嵌套较深时；建议用 Can I Use 查证目标环境
• 动态插入的子元素（如 JS 创建的 <button>）如果未设置 tabindex 且非原生可聚焦标签，也不会触发

配合 tabindex 扩展可聚焦范围

想让非表单元素（比如卡片中的 <div class="card">）也能响应“任意子项被聚焦”，可以给子项加 tabindex="0"：

<div class="card">  <h3>用户资料</h3>  <div tabindex="0" class="editable-field">张三</div>  <button>编辑</button></div>

.card:focus-within {  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);}

• tabindex="0" 让元素参与顺序聚焦（Tab 可达），但不改变语义
• 避免滥用 tabindex="1" 或更高值，会打乱默认 Tab 顺序
• 如果子元素本身已是可聚焦的（如 <button>），无需额外加 tabindex

浏览器对 :focus-within 的实现已相当稳定，但它的“隐式依赖”容易被忽略：它完全依赖子元素是否真实获得了焦点。调试时，不妨打开 DevTools 的 Elements 面板，手动选中子元素后按 Tab，观察父元素 class 是否更新，比猜更可靠。