不能独立控制，:checked仅响应状态，需配合input与侧边栏同级且input在前、~或+选择器、transform位移及transition动画才能实现滑入效果。
伪类 :checked 能否独立控制侧边栏显隐？
不能直接控制，但可以——前提是用 <input type="checkbox"> 作为状态开关，再用相邻兄弟选择器（~）或通用兄弟选择器（+）联动侧边栏元素。浏览器不支持用 :checked 直接驱动非表单元素的显隐，必须借助 DOM 位置关系和 CSS 选择器链。
常见错误是把 <input> 放在侧边栏内部，导致无法用兄弟选择器选中它；或者忘了加 display: none 隐藏 checkbox 本身，造成布局干扰。
-
<input>必须与侧边栏容器同级，且位于其前（否则~无法向上选中） - 侧边栏容器推荐用
<aside>或带 class 的<div>，避免用<nav>嵌套在<input>里 -
:checked + .sidebar只能选中紧邻的下一个兄弟；若中间有其他元素，改用:checked ~ .sidebar
如何让侧边栏从左侧滑入且不破坏页面流？
核心是用 position: fixed 或 position: absolute 脱离文档流，再配合 transform: translateX() 实现平滑位移。用 left: 0 + width 定位后，:checked 状态下设 transform: translateX(0)，未选中时设 transform: translateX(-100%)。
容易忽略的是过渡动画：只写 transition: transform 0.3s ease 不够，若侧边栏内含子元素（如菜单项），需确保父容器 overflow: hidden，否则内容会溢出显示。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏宽度建议用
min-width: 240px而非固定width: 240px，适配内容伸缩 -
transform比left更高效，避免重排；不要混用left和transform - 移动端需加
touch-action: manipulation提升点击响应
点击遮罩层关闭侧边栏怎么实现？
遮罩层（overlay）必须紧跟在 <input> 后、侧边栏前，且用 :checked ~ .overlay 控制显隐。关键点在于 z-index 层级：遮罩层 z-index 要高于侧边栏内容，但低于侧边栏本身（否则点不到侧边栏里的链接）。
典型错误是遮罩层用了 position: fixed 却没设 top: 0; left: 0; width: 100%; height: 100%，导致点击无效；或忘记给遮罩层加 cursor: pointer，视觉上不像可点击区域。
- 遮罩层
background-color推荐用rgba(0,0,0,0.5)，比纯黑更柔和 - 为兼容旧版 Safari，遮罩层需加
-webkit-tap-highlight-color: transparent - 遮罩层点击事件靠 label 或伪元素触发，实际无需 JS，但必须确保它能触发
<input>的 toggle
为什么 Safari 下 :checked 切换有时失效？
主要因 Safari 对隐藏 checkbox 的 focus 状态处理较严格：当用户用键盘 Tab 进入、空格切换时，若 <input> 没有 tabindex="-1" 或被 display: none 完全移出渲染树，可能丢失焦点响应。Chrome 和 Firefox 更宽容。
另一个常见原因是 HTML 结构嵌套过深，导致兄弟选择器匹配失败——Safari 对 ~ 的解析偶尔比其他浏览器更严格。
- 务必用
display: none而非visibility: hidden隐藏 checkbox，后者仍占空间且影响选择器匹配 - 避免在
<input>外层套多余 div，保持结构扁平：<input>→<label>→<div class="overlay">→<aside class="sidebar"> - 测试时用真机 Safari，模拟器可能掩盖 focus 行为差异
:checked 就会“失灵”。 
