答案：用 :checked ~ 而非 + 是因 HTML 中 input 与面板间常隔 label、空格或换行，+ 要求紧邻兄弟而失效，~ 可匹配后续所有同级元素，容错性强；同时必须确保二者同父且 input 在前，并避免 input 嵌套在 label 内。
为什么用 :checked + ~ 而不是 +
因为真实 HTML 结构里，input 和折叠内容之间几乎总隔着 label、空格、换行或注释节点。+ 只能选中紧邻的下一个兄弟元素，中间插一个 label 就彻底失效；~ 则匹配之后所有符合条件的兄弟元素，容错性强得多。
常见错误结构：<input><label>标题</label><div class="panel">内容</div> → input + .panel 不生效，因为 .panel 不是 input 的直接后继。
-
input:checked ~ .panel能稳定命中，只要.panel是同级后续元素 - 确保
input和.panel在同一父容器内，且input出现在.panel之前 - 别把
input包在label里再用+—— 这会让选择器层级错乱
max-height 动画卡住或跳变的真正原因
max-height: 0 → max-height: auto 或 max-height: 100% 都不会动——浏览器无法对 auto 或无基准的百分比做插值计算。必须用固定单位（px、em）且两端一致。
- 安全写法：
max-height: 0→max-height: 500px（不能一边是0，另一边是none或fit-content） - 值太大（如
9999px）会导致收起末尾拖沓，尤其内容少时明显 - 值太小（如
200px）会截断内容，动画中途卡住 - 务必搭配
overflow: hidden，漏掉它，内容会在过渡中溢出
如何避免可访问性失效
隐藏 input 不能用 display: none 或 visibility: hidden —— 屏幕阅读器读不到，键盘也无法聚焦。这是纯 CSS 折叠面板最常被忽略的合规红线。
- 正确隐藏方式：
position: absolute; clip: rect(0 0 0 0); -
label必须通过for="id"或包裹input绑定，否则点击标题不触发状态切换 - 别给
label加tabindex—— 它默认可聚焦，加了反而干扰语义 - 如果用
details，summary默认可聚焦，禁用箭头用summary::marker { display: none; }，别用display: none隐藏整个summary
移动端点击无反应？先查这三点
不是 JS 问题，而是 CSS 状态链断裂。纯 CSS 方案依赖 DOM 位置和属性绑定，任何一环松动都会导致点击无效。
- 打开 DevTools，手动勾选
input[type="checkbox"]，看对应.panel是否应用了展开样式 —— 不生效说明选择器没匹配上 - 检查
label的for值是否拼写错误，或与input的id完全一致（大小写敏感） - Vue/React 中若混用 v-model 或 useState 控制类名，会覆盖原生
:checked状态，导致伪类失效
内容高度波动大、或含图片/iframe 等异步加载项时，预设的 max-height 值大概率不准 —— 这时纯 CSS 已到能力边界，得切回 JS 读取 scrollHeight 动态设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
