CSS如何实现点击元素后的状态保持？利用focus-within伪类-css教程-PHP中文网

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

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

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

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

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

常见错觉来源是：给容器加 :focus-within，里面有个 input 或 button，点进去再点出来——只要没点到外部，焦点可能还留在内部可聚焦元素上，状态看似持续。但一旦用户：
• 按 Tab 移出容器
• 点击页面空白处
• 切换浏览器标签页
• 触发 blur() 脚本
状态就立刻丢失。

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

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

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

用 <input type="checkbox" id="toggle"> 隐藏，不设 name 避免提交干扰
用 <label for="toggle"></label> 或相邻兄弟选择器 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;
}