:checked + .menu 失效主因是 DOM 结构不满足相邻兄弟选择器要求，应改用 ~ 选择器并确保 input 与 menu 同级；隐藏 checkbox 需用 position: absolute; opacity: 0; pointer-events: none；动画须避免 display 和 height: auto，推荐 max-height 过渡。
能，但必须严格满足 DOM 位置、隐藏方式和选择器三者的配合，否则点了没反应是常态，不是偶然。
为什么:checked + .menu 有时不生效
根本原因不是 CSS 写错了，而是 HTML 结构没对齐选择器逻辑。+ 只能选中「紧挨着的下一个兄弟元素」，中间插了任何标签（比如 <label></label> 或空格文本节点）都会断掉链路。
-
input:checked + .menu要求<input>后面**立刻**跟<nav class="menu"></nav>，不能有换行、注释或其它标签 - 更稳妥的做法是改用
input:checked ~ .menu，它匹配后续所有同级兄弟，容错性高 - 如果
.menu包在<nav></nav>里，而<input>在<nav></nav>外，那两种选择器都无效——必须把<input>放到同一父容器下，或调整结构
隐藏 checkbox 的正确姿势
用 display: none 是最常见错误：部分 Safari 版本会跳过渲染该元素，导致 :checked 状态无法触发样式重绘。
- 必须用
position: absolute; opacity: 0; pointer-events: none;隐藏，既不占位又保留可交互性 -
z-index: -1或top: 0; left: 0;可进一步防止意外遮挡 -
<label for="xxx"></label>的for值要和<input id="xxx">完全一致，大小写敏感
菜单展开动画为什么不动
写了 transition 却没动画？大概率是因为用了不可过渡的属性，比如 display 或 height: auto。
立即学习“前端免费学习笔记（深入）”；
- 别用
display: none ↔ block，它没有中间状态，transition完全无效 - 推荐用
max-height：关闭时设max-height: 0; overflow: hidden;，展开时设一个足够大的值（如max-height: 400px;），比内容最大高度略高即可 - 避免用
height: 0 ↔ auto，auto无法参与过渡；若内容含图片或字体加载延迟，初始max-height不够会截断，可加padding-bottom: 1px微调重排
汉堡图标动画和菜单联动怎么写
图标旋转成 × 和菜单滑入是两套独立但同步的控制逻辑，共用同一个 :checked 状态即可。
- 图标部分：用
input#nav-toggle:checked + .hamburger span控制主横线旋转，::before和::after分别控制上下线，注意top和transform要同时过渡 - 菜单部分：用
input#nav-toggle:checked ~ .menu控制transform: translateX(0)或max-height，别混用left和transform，后者性能更好且不触发重排 - 遮罩层（overlay）也走同一套
~选择器，确保和菜单同显同隐；点击遮罩要能收起菜单，就得让它包裹在<label></label>里，或用for关联原<input>
真正卡住人的从来不是“怎么写动画”，而是 checkbox 是否被浏览器正确识别为可交互、DOM 顺序是否让选择器能链上、以及过渡属性有没有落在可动画的值上——这三个点任意一个出问题，整个菜单就静止在那里。
