:focus-within不能直接触发全选逻辑，因为它仅是纯CSS伪类，不执行JS、不触发事件、不修改DOM；它只能配合JS监听焦点变化来提前感知用户意图，进而激活全选行为。
为什么 :focus-within 不能直接触发全选逻辑
:focus-within 是一个纯 CSS 伪类，它只响应元素或其任意子元素获得焦点的状态，**不执行 JavaScript、不触发事件、不修改 DOM**。所以它本身无法“实现全选”——全选是行为，不是样式。常见误解是以为加个 :focus-within 就能让下拉里的“全选”选项自动勾选，实际做不到。
它的真正价值在于：配合 JS 监听焦点变化，提前感知用户进入下拉区域的意图，从而在合适时机激活全选逻辑（比如显示“全选”复选框、高亮操作区、或预加载选项）。别把它当 JS 替代品用。
如何用 :focus-within 配合 JS 实现可访问的下拉全选交互
典型结构是一个包裹 <select> 或自定义下拉（<div class="dropdown">）的容器，里面包含触发按钮、选项列表和“全选”复选框。关键点是把焦点委托给容器，再由 JS 响应。
- 容器必须设
tabindex="-1"（否则默认不可聚焦，:focus-within不生效） - “全选”复选框需放在下拉内容内部，且初始
display: none或用visibility: hidden，避免干扰 tab 顺序 - 监听容器的
focusin和focusout事件，而非blur/focus（后者不冒泡） - 用
event.target判断焦点是否落在下拉内部，再决定是否显示/激活全选控件
示例片段：
立即学习“前端免费学习笔记（深入）”；
<div class="dropdown" tabindex="-1">
<button aria-haspopup="listbox">选择标签</button>
<div class="dropdown-menu" aria-expanded="false">
<label><input type="checkbox" class="select-all"> 全选</label>
<label><input type="checkbox" name="tag" value="a"> A</label>
<label><input type="checkbox" name="tag" value="b"> B</label>
</div>
</div>
CSS 中可用 .dropdown:focus-within .select-all { display: block; } 控制显示，但勾选动作仍需 JS 绑定 change 事件处理。
IE 和旧版 Safari 不支持 :focus-within 怎么办
:focus-within 在 IE 完全不支持，Safari ≤ 15.4 仅部分支持（尤其对 contenteditable 或 shadow DOM 内部焦点不敏感）。如果项目需兼容这些环境，不能依赖 CSS 驱动显示逻辑。
- 降级方案：改用 JS 模拟，监听
focusin时遍历event.target是否在下拉容器内 - 避免用
:focus-within控制关键功能可见性（比如把“全选”按钮藏到只有 :focus-within 才显示），否则旧浏览器用户根本看不到该控件 - 可以用
@supports (selector(:focus-within))做特性检测，但注意该 at-rule 在 Safari ≤ 15.4 中也无效，得搭配运行时 JS 检测Element.prototype.matches是否支持:focus-within
全选逻辑里最容易漏掉的三个细节
即使 :focus-within 正确触发了 UI 展开，全选行为本身常出问题：
- 未同步反选状态：用户手动取消所有子项后，“全选”复选框仍为 checked，需监听每个子 checkbox 的
change并重算已选数量 - 未处理 indeterminate 状态：当部分子项被选中时，“全选”应设
indeterminate = true，且不能响应 click（否则会清空状态） - 键盘操作被忽略：用
Tab进入下拉后，按Space或Enter应能切换“全选”，但很多实现只绑了鼠标 click
真正的难点不在 :focus-within，而在如何让全选/反选/半选状态与子项保持精确同步，且兼顾键盘、屏幕阅读器、移动端点击穿透等场景。CSS 只是入口，后面全是 JS 的活儿。
