CSS如何实现点击元素后的状态保持？利用focus-within伪类

CSS如何实现点击元素后的状态保持？利用focus-within伪类的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

不能。:focus-within 仅在元素或其子元素获得焦点时生效，焦点一旦离开（如点击外部、Tab 移出、blur()）样式立即消失，不具备状态持久化能力。

focus-within 能不能让点击后状态一直保持？

不能。这是最常见的误解——:focus-within 只在元素或其子元素获得焦点（focus）时生效，且焦点一旦离开（比如点其他地方、按 Tab 移出、失焦），样式就立刻消失。它不是“记忆点击”的开关，也不改变 DOM 状态，更不会持久化 class 或属性。

为什么 focus-within 看起来“能保持”，但实际靠不住？

常见错觉来源是：给容器加 :focus-within，里面有个 input 或 button，点进去再点出来——只要没点到外部，焦点可能还留在内部可聚焦元素上，状态看似持续。但一旦用户：

• 按 Tab 移出容器

• 点击页面空白处

• 切换浏览器标签页

• 触发 blur() 脚本

状态就立刻丢失。

真正需要“点击后保持状态”，本质是状态管理问题，CSS 本身无存储能力。

替代方案：用 :checked + hidden checkbox 最轻量实现“点击切换+保持”

无需 JS，兼容性好（IE9+），适合菜单展开、选项卡、折叠面板等场景。核心是把点击行为映射到表单控件的选中状态，再用 :checked 驱动样式。

1. 用 <input type="checkbox" id="toggle"> 隐藏，不设 name 避免提交干扰
2. 用 <label for="toggle"> 或相邻兄弟选择器 input:checked + .target 控制目标元素
3. 点击 label 切换 checkbox 状态，:checked 伪类随之生效，样式即“保持”

<input type="checkbox" id="menu-toggle" hidden><label for="menu-toggle">☰ Menu</label><nav class="menu">...</nav>#menu-toggle:checked + .menu {  max-height: 500px;  opacity: 1;  transition: opacity 0.3s;}.menu {  max-height: 0;  opacity: 0;  overflow: hidden;  transition: opacity 0.3s, max-height 0.3s;}

真需要 JS 参与时，focus-within 还有没有价值？

有，但角色不同：它适合做“焦点上下文感知”，比如表单区域高亮、下拉菜单悬停+键盘导航混合交互。和点击保持状态是两件事，混用反而增加逻辑耦合。

1. 不要用 :focus-within 替代 .active 或 .is-open 类
2. 如果用了 JS 控制状态，直接操作 class 更可控；:focus-within 可作为辅助增强（例如：键盘聚焦时也触发同款视觉反馈）
3. 移动端注意：iOS Safari 对 :focus-within 的触发较保守，常需显式 tabindex 才生效

最易被忽略的一点：很多人以为加了 tabindex="0" 就能让任意元素支持 :focus-within，其实必须确保该元素真的能获得焦点（比如没有 disabled、未被 pointer-events: none 阻断、父级没 contain: layout 干扰）。