纯CSS手风琴无需JavaScript，利用checkbox的:checked伪类与label控制状态；需满足：checkbox有唯一id、label正确关联、内容紧随其后并用+选择器；核心是max-height过渡与可访问性适配。
为什么不用 JavaScript 就能做手风琴？
因为 <input type="checkbox"> 的状态变化会触发 :checked 伪类，而 <label></label> 的 for 属性或嵌套结构可以控制它——这给了我们纯 CSS 控制展开/收起的锚点。关键不是“模拟点击”，而是把用户交互映射到 CSS 状态上。
HTML 结构必须满足的三个条件
结构松散或标签错位会导致点击无响应、状态不同步：
-
<input>必须是type="checkbox"（radio也可但不推荐多开），且要有唯一id -
<label></label>要么用for="对应input的id"，要么直接包裹<input>和标题内容（更稳妥） - 要展开的内容（如
<div class="accordion-content">）必须紧跟在 <code><input>后面，且使用+或~选择器定位（+更精准，只选紧邻兄弟）核心 CSS：用
:checked控制高度与过渡不能直接对
height: auto做transition，所以得用max-height配合足够大的值（比如500px），再设overflow: hidden。常见错误是忘记重置padding或margin导致视觉跳变：input[type="checkbox"] { display: none; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; padding: 0 1rem; } input[type="checkbox"]:checked + .accordion-content { max-height: 500px; padding: 1rem; }注意：
max-height的值要略大于内容实际高度，太小会截断；太大则收起动画变慢。如果内容高度差异大，建议用 JS 动态设，但那就不是纯 CSS 了。立即学习“前端免费学习笔记（深入）”；
可访问性与移动端适配要点
纯 CSS 方案默认不发
click事件，屏幕阅读器可能无法感知状态变化，也容易在 iOS Safari 上出现点击延迟或失效：- 给
<label></label>加role="button"和tabindex="0"，确保键盘可聚焦 - 为
<input>添加aria-expanded并用 JS 同步（严格来说这破了“纯 CSS”前提，但无障碍必须） - 移动端点击区域太小？用
min-height或padding扩展<label></label>可点击区，别只靠文字 - 避免在
.accordion-content里放position: absolute元素——它们会逃出overflow: hidden的裁剪范围
最易被忽略的是：多个手风琴共存时，每个
<input>的id和<label></label>的for必须一一对应，漏一个就整个区块失联。 - 给
