:checked 配合兄弟选择器控制抽屉显隐的核心是用 checkbox 作状态开关：需置于抽屉前且同级，推荐结构为隐藏 input + label 触发按钮 + ~ 选择的 aside 抽屉；用 transform 移入移出并配合 overflow-x: hidden 和 touch-action: pan-y 保障动效与体验；隐藏 input 应用 position: absolute; opacity: 0; pointer-events: none；蒙层需独立、可点击关闭；无障碍需 role="button" 和 tabindex，复杂焦点管理仍需轻量 js。
用 :checked 配合 <input type="checkbox"> 触发抽屉显隐
核心不是靠 JS，而是把 checkbox 当作“状态开关”，用它是否勾选来驱动样式变化。必须用 <input> 元素（不能是 <label></label> 或其他），且它得在 DOM 中位于抽屉元素之前，或至少是其兄弟节点——否则兄弟选择器（~）和相邻兄弟选择器（+）都无效。
常见错误：把 checkbox 放在抽屉内部、或放在抽屉之后、或用 display: none 彻底隐藏却忘了加 position: absolute 和 clip: rect(0 0 0 0) 等可访问性隐藏方式，导致部分屏幕阅读器无法识别状态。
- 推荐结构：一个隐藏的
<input id="drawer-toggle" type="checkbox">，紧跟着一个<label for="drawer-toggle"></label>作为触发按钮，再跟一个<aside class="drawer"></aside> - 抽屉元素必须和
<input>处于同一父容器内，且在其后（才能用~） - 不要只依赖
visibility: hidden或opacity: 0控制显示，它们不改变文档流，容易遮挡点击区域
~ 和 + 兄弟选择器的实际区别与选用
+ 只匹配**紧邻下一个**兄弟元素，~ 匹配**后续所有同级**兄弟元素。抽屉通常不止一个元素（比如有 header、nav、footer），所以多数情况该用 ~。
例如：若抽屉结构是 <input><label><aside><nav></nav></aside></label>，那么 input:checked + label 能控制 label 样式，但 input:checked + aside 会失效（因为中间隔了 label）；而 input:checked ~ aside 就能命中。
- 要用
+的场景：仅需切换紧挨着的按钮图标（如 label 内的 hamburger → ×） - 要用
~的场景：控制整个<aside></aside>的transform、width、pointer-events - 注意：兄弟选择器无法向上选中前序元素，也不能跨父容器
抽屉展开时的 transform 与 overflow 配合要点
仅靠 width: 0 / width: 280px 做过渡，容易出现内容闪跳或滚动条突兀出现。更稳妥的是用 transform: translateX() 移入移出，配合 overflow: hidden 在父容器上锁死。
典型写法：aside.drawer { transform: translateX(-100%); transition: transform 0.3s ease; }，然后 input:checked ~ aside.drawer { transform: translateX(0); }。这样动画平滑，且不触发重排。
- 务必给抽屉父容器（通常是
或最外层<div>）加 <code>overflow-x: hidden，否则展开时页面可能横向滚动 - 移动端要注意
touch-action: pan-y加在抽屉上，避免 iOS 滑动时误触发页面滚动 - 如果抽屉内有
position: fixed元素（如返回顶部按钮），它会脱离抽屉的 transform 上下文，需额外用translateZ(0)或调整层级 - 隐藏 checkbox 推荐用：
position: absolute; opacity: 0; pointer-events: none;（比display: none更可靠） - 抽屉背景蒙层（overlay）必须是独立元素，且紧跟在
<input>后，用input:checked ~ .overlay控制显隐和z-index - 蒙层需加
cursor: pointer并绑定for到 checkbox 的id，确保点击蒙层也能关闭抽屉 - 为 label 添加
role="button" tabindex="0"，支持键盘空格/回车触发
无障碍与移动端点击穿透的补救措施
纯 CSS 抽屉最大的隐患是：当 <input> 被 display: none 后，iOS Safari 有时不会触发 :checked 状态更新，尤其在快速连点时；另外，抽屉遮盖区域若没设 pointer-events: none，底层内容仍可被点中。
解决方案不是加 JS，而是微调 CSS 层叠逻辑：
真正难处理的是嵌套滚动和 focus 管理——这部分 CSS 无解，一旦需要键盘导航或焦点捕获，就得让步给轻量 JS。
