:focus-within 是 CSS 伪类选择器，当元素自身或其任意后代获得焦点时触发，适用于表单高亮、下拉菜单、可访问性增强等场景，Chrome 60+、Firefox 52+、Safari 15.4+ 支持，IE 不支持。
focus-within 是什么，什么时候能用
是一个 CSS 伪类选择器，当元素自身获得焦点，或其任意后代元素获得焦点时，该元素就会匹配这个选择器。它不是 JavaScript 的
方法，也不依赖 JS 监听，纯 CSS 行为。
典型使用场景：表单容器高亮、下拉菜单展开后保持外层样式、可访问性增强（比如键盘导航时整个卡片变色）。
浏览器支持从 Chrome 60、Firefox 52、Safari 15.4 开始稳定可用；IE 完全不支持，Edge 79+ 跟 Chrome 一致。如果你的项目需兼容旧版 Edge 或 IE，得用 JS 模拟（比如监听
事件并加 class）。
怎么写 focus-within 的基础语法
写法很简单：
必须挂在一个父级容器上，不能单独用于 input 或 button 这类叶子节点（虽然语法合法，但没实际意义）。
立即学习
“
前端免费学习笔记（深入）
”；
常见错误是写成
—— 这永远不生效，因为
没有可聚焦的后代。
正确写法示例：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
注意第二行：这里给
下的
设置背景，前提是
本身或它的某个子元素（比如里面的
、
、带
的
）获得了焦点。
focus-within 和 :focus 的关键区别
只作用于“当前被聚焦的那个元素”，而
作用于“包含被聚焦元素的最近祖先”。
容易踩的坑：
如果父容器设了
且子元素聚焦后内容溢出，
仍会触发，但视觉上可能看不到变化
动态插入的子元素（如 JS append 的
），只要插入后可聚焦，
立即生效，无需额外操作
使用
的元素也能触发
，但
本身不可被 Tab 键到达，需配合 JS
元素算可聚焦后代，所以
在编辑时也会命中
一个实用的表单交互代码片段
下面是一个带验证提示的输入框组，用
实现“一碰就高亮整个区块”：
这里的关键是：用户点进
，
立即响应，错误提示淡入——不需要 JS 绑定 focus/blur 事件，也不用管理 class 切换状态。
真正容易被忽略的是 tabindex：如果
内没有原生可聚焦元素（比如只有 div + span），又想让它响应键盘焦点（例如用方向键切换），就得给某个子元素加
，否则键盘用户永远进不去这个区域。
:focus-withinfocus()focusin:focus-withininput:focus-withininputform:focus-within {
border: 2px solid #007bff;
}
div.card:focus-within input {
background: #f8f9fa;
}div.cardinputdiv.cardinputbuttontabindexspan:focus:focus-withinoverflow: hidden:focus-withininput:focus-withintabindex="-1":focus-withintabindex="-1"el.focus()contenteditablediv[contenteditable]:focus-within:focus-within
请输入有效邮箱
.input-group {
padding: 8px;
border-radius: 4px;
}
.input-group:focus-within {
background: #eef7ff;
border: 1px solid #007bff;
}
.input-group .error {
opacity: 0;
transition: opacity 0.2s;
}
.input-group:focus-within .error {
opacity: 1;
}input.input-group.input-grouptabindex="0"