能实现，但必须严格满足HTML结构前提——input和面板元素必须是同一父级下的直接兄弟节点且面板在input之后；:checked + .panel要求紧邻无间隔，:checked ~ .panel更宽松；动画须用max-height过渡，单开单闭需用radio。
能实现，但必须严格满足 HTML 结构前提——input 和面板元素必须是同一父级下的直接兄弟节点，且面板在 input 之后。
为什么 :checked + .panel 有时完全不生效
最常见原因是 DOM 结构断裂：input 和 .panel 不是兄弟关系。比如把 .panel 套进 <label> 里、或用外层 <div> 包裹了其中一个、又或者两者被不同父容器隔开，都会导致选择器失效。
-
:checked + .panel只匹配紧挨在input后面的**第一个**同级.panel元素 - 如果中间插了其他标签（如
<span>或空格文本节点），也大概率不匹配 - 浏览器对“相邻”的判定很严格：哪怕只多一个换行符，在某些解析模式下都可能破坏匹配
:checked + 和 :checked ~ 怎么选
用 + 更精确，但容错低；用 ~ 更宽松，适用性更广。
- 选
+：当.panel确实紧贴input后面，中间无任何其他兄弟节点（包括文本） - 选
~：只要.panel在同一父容器内、位于input之后，不管中间隔几个元素，都能命中 - 动画控制时，
~更稳妥——因为max-height过渡依赖元素存在且可计算，而+容易因结构微调突然失效
折叠动画必须用 max-height，不能用 height 或 display
display: none 无法过渡，height: 0 要求内容高度固定，都不适合动态内容。只有 max-height 能兼顾可变高度与 CSS 动画。
立即学习“前端免费学习笔记（深入）”；
- 收起状态设
max-height: 0+overflow: hidden - 展开状态设一个足够大的固定值（如
max-height: 500px），不能写max-height: auto（CSS 不支持该值做过渡） - 过渡属性要包含
max-height，例如：transition: max-height 0.3s ease, opacity 0.3s ease - 如果面板内容高度差异极大，500px 可能不够，需按实际最大预估；太小会导致截断，太大则动画拖沓
单开单闭（手风琴）必须用 radio，不是 checkbox
纯 CSS 没法让一个 checkbox 点击时自动取消另一个——这是语义限制，不是写法问题。
- 全部换成
<input type="radio" name="accordion">，靠name属性强制互斥 - 每个
radio的id必须唯一，对应<label for="xxx"> - 默认全收起；若需默认展开第一个，加
checked属性到第一个input - 注意：radio 不支持“再次点击取消选中”，所以用户无法一键收起当前项（除非加 JS）
真正卡住人的从来不是 CSS 写法，而是 HTML 结构是否干净平级——只要 input、label、.panel 三者在源码中依次排列且无嵌套干扰，:checked ~ .panel 就能稳稳工作。其他所有问题，基本都是结构先错了。
