必须用input[type="checkbox"]或[type="radio"]，因为:checked伪类仅对这两种元素及option生效；误用hidden、button或div会导致状态无法识别，样式不响应。
:checked 是折叠面板实现的“状态开关”，它不执行逻辑，只响应用户点击后 input 的选中状态变化，从而触发 CSS 样式重绘——这是纯 CSS 实现交互的核心前提。
为什么必须用 input[type="checkbox"] 或 input[type="radio"]
:checked 只对 checkbox、radio 和 option 元素生效，button 或 div 无法被它识别。常见错误是误用 type="hidden" 或直接删掉 input，结果样式完全不响应。
- 必须保留
input元素在 DOM 中，哪怕视觉上隐藏；display: none安全，但visibility: hidden或opacity: 0在部分旧版 Safari 中会导致:checked失效 -
label必须通过for属性绑定到input的id，或把input包在label内，否则点击 label 不会触发状态切换 - 不要用
disabled，否则即使勾选也无法触发:checked
+ 和 ~ 选择器怎么选？
它们决定你能控制谁、控制多远：
-
input:checked + .panel-content：只影响紧挨在它后面的.panel-content，结构必须严格为input→label→.panel-content（中间不能插其他元素） -
input:checked ~ .panel-content：能选中所有后续同级的.panel-content，更灵活，适合多个面板共用一个开关，或内容块嵌套较深时 - 如果用了
label包裹input，那input就不再是兄弟节点的起点，此时+和~都失效，得改用label上的类配合:has()（但:has()兼容性差，不推荐）
动画为啥常用 max-height 而不是 height
因为 height: auto 无法参与 CSS 过渡，而 max-height 可以设一个“足够大但不过分”的值（比如 500px），让浏览器能线性插值过渡。
- 设太小（如
max-height: 100px）会导致内容被截断 - 设太大（如
max-height: 10000px）会让动画收起时明显“拖尾”，尤其在长内容下 -
overflow: hidden必须和max-height同时存在，否则过渡过程中内容会溢出 - 别用
display: none/block做切换——它不可过渡，且会破坏焦点、影响屏幕阅读器
真正难的不是写出来，而是让每个面板的 max-height 值刚好够用又不浪费，还要兼顾不同屏幕尺寸下的内容高度变化；多数人卡在这里，而不是语法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
