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

作者：袖梨 2026-07-30

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 驱动样式。

用 <input type="checkbox" id="toggle"> 隐藏，不设 name 避免提交干扰
用 <label for="toggle"> 或相邻兄弟选择器 input:checked + .target 控制目标元素
点击 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;}