:checked伪类实现侧边栏开关需满足三条件：input与侧边栏同级且input在前、用~或+选择器定位、避免display:none而改用opacity:0等隐藏；否则点击无反应或键盘不可操作。
纯 CSS 实现侧边栏开关，:checked 能用，但必须满足 DOM 顺序、选择器路径和可访问性补丁三个硬条件，否则点击无反应或键盘不可操作。
为什么 :checked 有时点了没反应
根本原因是 input[type="checkbox"] 和目标侧边栏不是兄弟关系，或 input 被设了 display: none 导致旧版 Safari 忽略状态变化。CSS 没有父选择器，:checked 只能靠 +（相邻）或 ~（通用兄弟）选中后续元素，所以 DOM 中 input 必须在侧边栏之前，且同级。
-
input必须有id，对应label的for属性才能触发状态切换 - 别写
input { display: none; }—— 改用position: absolute; opacity: 0; pointer-events: none; - 侧边栏选择器必须是
#sidebar-toggle:checked ~ .sidebar这类形式，不能写成.sidebar:has(#sidebar-toggle:checked)（CSS 不支持）
:checked + transform 比 left 动画更可靠
用 left: -250px 触发 layout，动画卡顿、高 DPI 下偏移；transform: translateX(-100%) 走合成层，性能好、对齐准。但要注意：初始位移值得匹配容器宽度，translateX(-100%) 是相对自身宽，translateX(-250px) 才是绝对像素——选哪个取决于你是否固定侧边栏宽度。
- 如果侧边栏用
width: 250px，推荐transform: translateX(-250px)，避免缩放时错位 - 如果用了
clamp()或百分比宽度，改用translateX(-100vw)更安全 - 务必加
transition: transform 0.3s ease和will-change: transform（仅激活态），否则某些安卓 WebView 不启用 GPU 加速
小屏展开后，主内容怎么不被遮挡
侧边栏 position: fixed 后，主内容默认还在原位置，滚动时会被盖住。不能只靠 z-index 堆叠，得让主内容“感知”侧边栏展开状态。
- 给主内容容器加
margin-left: 250px（或对应宽度），并在#sidebar-toggle:checked ~ .main-content中取消该 margin - 更稳妥的做法是把整个布局包进一个
flex容器，侧边栏设flex-shrink: 0，主内容设flex: 1，再用:checked控制侧边栏的width或flex-basis - 展开时记得给
body加overflow: hidden，防止背景内容还能滚动——这点常被忽略，iOS 上手指划动会“透底”
键盘用户按 Esc 关不了？那是没补 JS
:checked 本身不响应键盘事件，Esc 关闭、Tab 焦点管理、aria-expanded 同步都得靠少量 JS 补足，否则不符合 WCAG。
- 监听
document的keydown，判断e.key === 'Escape'时触发input.checked = false - 侧边栏展开后，用
focus()把焦点移到第一个可交互子元素（如首项a或button） - 每次切换都要同步更新
label的aria-expanded值，否则屏幕阅读器读不出状态
真正难的不是写几行 :checked ~ .sidebar，而是让这个“纯 CSS”方案在 Safari 15、Android WebView、Zoom 200% 场景下都稳住——DOM 结构、单位选择、焦点流、无障碍属性，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
