:checked伪类仅响应状态，不控制滑动；滑动由~/+选择器联合transition和transform实现，需input与sidebar同级且input在前，初始设translatex(-100%)，:checked时改为translatex(0)，transition写在非:checked状态。
伪类:checked 本身不控制滑动，只响应状态
很多人以为 :checked 能直接让菜单“滑出来”，其实它只是个状态钩子——它不执行动画、不改变布局、也不触发 transform。真正负责滑动的是配合它的 ~ 或 + 选择器 + transition + transform。关键在于：必须用一个隐藏的 <input type="checkbox"> 作为开关，再用 :checked 去联动侧边栏容器的样式。
HTML 结构必须满足兄弟/后续兄弟关系
因为 :checked 只能影响后续兄弟元素（+）或后续所有同级元素（~），所以侧边栏容器必须和 <input> 在同一层级，且位置靠后。常见错误是把 input 放在 sidebar 内部，或用 div 包裹导致层级断裂。
-
<input id="menu-toggle" type="checkbox">必须是第一个元素（或至少在 sidebar 之前） - 侧边栏用
<aside class="sidebar"></aside>，且紧跟在 input 后面（用~）或紧邻（用+） - 触发按钮用
<label for="menu-toggle"></label>，确保点击可切换状态
示例结构：
<input id="menu-toggle" type="checkbox"><label for="menu-toggle">☰</label> <aside class="sidebar">...</aside><main class="content">...</main>
移动端适配的关键 CSS 组合
纯 :checked ~ .sidebar 只能显隐，要滑动得靠 transform 和 transition。注意三点：初始状态必须设为 transform: translateX(-100%)；:checked 状态下改为 translateX(0)；transition 要写在非 :checked 状态上，否则首次打开无动画。
- 侧边栏默认：
transform: translateX(-100%); transition: transform 0.3s ease; -
#menu-toggle:checked ~ .sidebar：transform: translateX(0); - 加
position: fixed和width: 80vw防止内容挤占 - 别漏掉
overflow-x: hidden在 body 上，否则滑动时页面横向滚动
点击遮罩层关闭菜单的兼容写法
用户习惯点空白处关菜单，但 :checked 没有“失焦”概念。解决方案是把遮罩层（overlay）放在 input 后、sidebar 同级，并用 :checked ~ .overlay 显示。遮罩层需覆盖全屏、z-index 高于 sidebar，且绑定 label 的 for 属性无效——只能靠 JS 或 trick：把 overlay 设为 <label for="menu-toggle"></label> 的子元素，或用 pointer-events。
- 推荐做法：overlay 是
<label for="menu-toggle"></label>的直接子元素，点击即触发 checkbox 切换 - 或者 overlay 单独写，但加
pointer-events: none，内部放一个透明<input type="checkbox">不现实，所以更稳的是用 JS 监听 click，但纯 CSS 场景下 label 嵌套最可靠 - 注意 Safari 对
transform+fixed的渲染 bug，建议加backface-visibility: hidden
复杂点不在逻辑，而在层级顺序和 transition 的触发时机——多试一次 DOM 顺序，比调十次 CSS 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
