:checked 只能通过 + 或 ~ 选择器控制后续兄弟元素，因此面板必须与 input 平级且位于其后；实现单开单闭需改用 name 相同的 radio；max-height 动画须设固定值而非 auto，结构正确性优先于样式技巧。
:checked 本身不能直接控制兄弟元素以外的任意元素展开/收起——它只对紧邻的 <label> 或后续兄弟元素生效，想靠它驱动远距离面板，必须用 HTML 结构配合。
为什么 :checked 只能控制兄弟或后续兄弟元素
CSS 选择器没有“父选择器”或“前一个兄弟”能力，:checked 的作用范围严格受限于选择器语法：只能通过 + （相邻兄弟）或 ~ （通用兄弟）选中其后的元素。这意味着 input 必须放在面板之前，且面板得是它的兄弟节点，不能嵌套在别的容器里。
- 错误结构：
<div><input type="checkbox"></div><div class="panel"></div>→input和panel不是兄弟，:checked ~ .panel失效 - 正确结构：
<input id="a" type="checkbox"><label for="a">标题</label><div class="panel">内容</div> - 所有面板需平级排列，不能包裹在同一个
<div class="accordion">内再统一控制 —— 那会切断兄弟关系
如何用单个 checkbox 实现单开单闭（手风琴效果）
纯 CSS 无法“取消其他已选中的 checkbox”，但可以用 radio 替代 checkbox，利用 name 属性强制互斥。这是最轻量、无 JS 的手风琴解法。
- 把所有
<input type="checkbox">换成<input type="radio" name="accordion"> - 每个
radio的id要唯一，label[for]必须匹配对应id -
.panel使用input:checked ~ .panel显示，未选中时用max-height: 0+overflow: hidden隐藏 - 注意：默认没选中时所有面板都收起，若需默认展开第一个，给第一个
input加checked属性
max-height 过渡动画为何不能设为 auto
CSS transition 不支持 height: auto 或 max-height: auto 的动画，浏览器无法计算中间帧。必须用固定值或足够大的 max-height 做过渡占位。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：估算面板最大可能高度（如
max-height: 500px），设transition: max-height 0.3s ease - 不要用
height，因为height: 0会破坏内部流式布局（如 flex 子项可能错位） - 若内容高度差异极大，
max-height: 500px在短内容上会有明显延迟收起感；可改用clip-path或transform: scaleY()替代，但兼容性略降（clip-pathIE 不支持）
移动端点击区域小、折叠体验卡顿的修复点
原生 input[type="radio"] 默认样式在手机上点击热区极小，且部分安卓浏览器对 max-height 过渡渲染不流畅。
- 隐藏原生
input：position: absolute; opacity: 0; pointer-events: none; - 扩大
label点击区：给label设display: block; padding: 12px 16px;，并加cursor: pointer - 提升动画性能：给
.panel加will-change: max-height（仅当有卡顿才加，别滥用） - 避免在
.panel里放大量 DOM 或重绘元素（如频繁变化的 SVG、canvas），否则max-height动画会掉帧
真正难的不是写出能动的代码，而是让每一块 input、label、panel 在 DOM 树里刚好落在正确的位置关系上——差一个层级，整个手风琴就失效。结构比样式更关键。
