纯CSS侧边栏开关需用:checked伪类联动input与后续元素，input必须前置且隐藏（position:absolute;opacity:0;pointer-events:none），推荐checkbox+~选择器；侧边栏用transform:translateX()过渡更可靠，遮罩层作为同级label实现点击关闭；注意Safari渲染延迟问题。
用 :checked 配合隐藏单选框实现侧边栏开关
纯 CSS 控制侧边栏伸缩，核心是把一个不可见的 <input type="checkbox"> 或 <input type="radio"> 作为状态开关，用 :checked 伪类联动后续元素的显示/隐藏和过渡。不能直接监听点击事件，但能靠 label 关联、点击穿透来触发状态切换。
常见错误是把 input 放在 DOM 后面或脱离控制流，导致后续 ~ 或 + 选择器失效；或者忘了设 input 的 position: absolute; opacity: 0; pointer-events: none;，让它不占位又不影响交互。
-
input必须在 DOM 中位于被控制元素之前（才能用~或+） - 推荐用
<input id="nav-toggle" type="checkbox">，比radio更直观，且支持再次点击收起 -
label[for="nav-toggle"]要和input#nav-toggleID 严格匹配，大小写敏感 - 别用
display: none隐藏input——它会断掉:checked状态更新
侧边栏容器如何响应 :checked 做宽度与过渡
侧边栏本身不能直接被 :checked 选中，得靠相邻/兄弟选择器“接力”。典型结构是：input → label（触发层）→ .sidebar（目标）。用 input:checked ~ .sidebar 最稳妥，兼容性好，且不依赖紧邻关系。
动效关键不在“伸缩”动作本身，而在过渡属性是否可动画。width 可以过渡，但必须有明确的数值起点和终点（比如从 0 到 260px），不能用 auto；transform: translateX() 更推荐，性能更好，且支持 auto 值回退（比如 translateX(-100%) → translateX(0)）。
立即学习“前端免费学习笔记（深入）”；
- 用
transform比width更可靠：避免重排，兼容性到 IE10+ -
transition: transform 0.3s ease, opacity 0.2s ease;—— opacity 配合提升视觉反馈 - 侧边栏初始状态建议设
transform: translateX(-100%);，而非left: -100%;，后者可能受父容器overflow干扰 - 记得给
.sidebar加will-change: transform;（可选，对频繁开关有帮助）
遮罩层（overlay）怎么随侧边栏同步显隐
遮罩层通常需要和侧边栏同显同隐，并且点击时能关闭菜单——这靠的是同一组 :checked 状态驱动两个不同元素。只要它们都在同一个 input:checked 的作用域内（即都满足 input:checked ~ *），就能同时响应。
容易忽略的是遮罩的层级和点击穿透问题：遮罩要盖住主内容，但不能挡住侧边栏；点击遮罩应触发 input 取消勾选，这就要求遮罩本身不阻断事件，或用 JS 辅助（但我们坚持纯 CSS，所以得让遮罩成为 label 的一部分）。
- 把遮罩做成
<label for="nav-toggle"></label>，并设position: fixed; z-index: 99; - 遮罩
label必须和input在同一父级下，否则for不生效 - 遮罩默认
opacity: 0; visibility: hidden;，input:checked ~ .overlay设为opacity: 0.5; visibility: visible; - 别用
pointer-events: none在遮罩上——它会让点击无效；要用pointer-events: auto确保能触发label行为
移动端适配与 Safari 下的常见 bug
iOS Safari 对 :checked + * 和 :checked ~ * 的重绘有时延迟，尤其在快速连点时状态“卡住”，表现为侧边栏开了关不了。这不是 CSS 写错了，而是 Safari 对 checkbox 状态变更的渲染调度问题。
另一个坑是 viewport 缩放或横屏切换后，transform 偏移量计算错位；还有部分安卓 WebView 对 will-change 处理异常，反而导致闪屏。
- 加一行
input { -webkit-appearance: none; }，防止 Safari 渲染原生 checkbox 样式干扰布局 - 避免在
:checked规则里写height: auto或依赖内容撑开的尺寸，Safari 可能不重绘 - 如果用
transform: translateX()，确保侧边栏父容器没设overflow: hidden，否则 iOS 会裁掉动画过程 - 真机调试时，打开 Safari 开发者工具 → “Elements” 面板，手动 toggle
input的checked属性，看样式是否实时更新——这是验证逻辑是否通的关键一步
最麻烦的不是写法，而是 Safari 对 :checked 状态和 transform 动画的组合渲染时机不可控。有时候加个 backface-visibility: hidden; 在侧边栏上就能破局，有时候得靠强制重排（比如临时改 font-size）——但那就已经不算纯 CSS 了。
