:focus-within 能检测容器内任意可聚焦子元素是否获焦，无需 JS；但子元素必须真正可聚焦，如被 pointer-events: none、contain: layout、tabindex="-1" 或 disabled 等阻止则失效。
:focus-within 能直接检测容器内任意可聚焦子元素是否获得焦点，无需 JS，但必须确保子元素真能拿到焦点，否则它永远不触发。
子元素必须实际可聚焦，不是“看起来像能点”
常见失效场景是：input 被 pointer-events: none 挡住、父层加了 contain: layout、或子元素本身 tabindex="-1" 或 disabled。这些都会让浏览器判定“焦点没进入”，:focus-within 就不会匹配。
、
、
、
默认可聚焦；
、
等非表单元素需显式加
避免在祖先链上设置
或
，某些 Chrome/Firefox 版本会截断焦点传播
移动端 Safari 15.4–16.3 对
+
组合有 bug，建议降级为监听
:focus-within 匹配的是整个祖先链，不是只限直系父元素
如果 HTML 是
，那么点击
时，
、
、
全部生效——不是只有最近一层父容器。
这能用来做嵌套菜单展开（如外层
+ 内层
同时响应）
但要注意样式优先级：若
和
冲突，后者权重更高，可能覆盖前者
不要误以为
只在
自身被 Tab 进去时才触发——它只看后代有没有焦点
和 JavaScript 的 focusin 事件不是一回事，别混用
:focus-within 是纯 CSS 状态，由浏览器同步维护；
是事件，能捕获脚本调用的
，但需要手动绑定、清理，且存在冒泡被阻止的风险。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
仅改样式（边框、背景、阴影）→ 无条件选
，零成本、无内存泄漏、天然支持键盘导航
要记录埋点、清空其他区域错误提示、或控制第三方组件 → 必须用
监听在容器上，再用
判断是不是你关心的子元素
混用风险：比如 JS 主动
后立刻读
，Safari 15.6 下可能有 1 帧延迟，值还是旧的
最易被忽略的一点：:focus-within 不关心焦点“怎么来”，只认“有没有”。鼠标点、Tab 进、JS 调用 focus()，它都响应。但它也极度诚实——子元素只要没真正进入焦点管理树（哪怕只是被
遮住），它就沉默到底。
inputtextareabuttonselectdivspantabindex="0"contain: layoutcontain: paintinput[type="search"]overflow: hiddenfocusininputform:focus-within.card:focus-within.field:focus-within.dropdown.dropdown-menu.field:focus-within inputinput:focus.card:focus-within.cardfocusinelement.focus():focus-withinfocusinevent.targetinput.focus()getComputedStyle(container).borderColorvisibility: hidden