label与input[type="checkbox"]必须同级紧邻或input嵌套于label内，才能通过:checked ~ .accordion-content实现纯CSS手风琴效果；隐藏checkbox须用clip或opacity等保留交互性，禁用display:none；多面板需每个input有唯一id。
label 和 input[type="checkbox"] 必须同级且紧邻才能触发折叠
兄弟选择器 ~ 或 + 只能选中**同一父容器内、位于 checkbox 后面的同级元素**。如果中间插了其他标签（比如 <div>、空格换行产生的文本节点），:checked ~ .accordion-content 就会失效。
常见错误写法：<input type="checkbox"><div><label>标题</label></div><div class="content">...</div> —— 此时 .content 不是 input 的兄弟，而是 div 的子元素，选择器完全不匹配。
- 正确结构必须是：
<input>→<label>→<div class="accordion-content">（三者平级） - 推荐用包裹式写法：
<label><input type="checkbox">标题</label><div class="accordion-content">，此时input是label的子元素，点击区域大且语义清晰 - 若用
for绑定，input必须有id，label的for值必须**完全一致**（包括大小写和连字符）
隐藏 checkbox 但不能让它失去交互能力
直接写 display: none 会让 input 彻底不可聚焦、不可切换，label 点击也无效。必须保留其可交互性，只是视觉上隐藏。
- 安全写法：
position: absolute; clip: rect(0 0 0 0);或opacity: 0; width: 1px; height: 1px; overflow: hidden; - 禁用写法：
display: none、visibility: hidden、pointer-events: none - 如果用了
for绑定但 checkbox 被隐藏失效，大概率是上面某条禁用规则在起作用
:checked ~ .accordion-content 是最灵活的选择器链
+ 只能选中 checkbox 后面**紧邻的下一个兄弟元素**，而手风琴内容往往不是紧跟在 checkbox 后（中间常有 label），所以 + 容易断链；~ 匹配后面**所有符合条件的兄弟元素**，容错更强。
立即学习“前端免费学习笔记（深入）”；
- 典型有效写法：
input[type="checkbox"]:checked ~ .accordion-content { max-height: 300px; opacity: 1; } - 对应初始状态必须显式设置：
.accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; } - 不要依赖
height: auto做过渡——CSS 无法对auto值做动画，必须用max-height模拟 - 预设的
max-height值要略大于内容实际高度（比如 300px、500px），太小会截断，太大则动画变慢
多面板独立开关的关键是每个 checkbox 都要有唯一 ID
多个手风琴项共存时，只要每个 input 的 id 不同，label 的 for 分别指向它，就能互不影响。不需要 JS，纯靠 DOM 结构隔离状态。
- 错误做法：所有 checkbox 共享同一个
name（checkbox 本就不该用 name 控制单选，那是 radio 的逻辑） - 正确做法：每个
input有唯一id，如id="faq-1"、id="faq-2"，对应 label 的for="faq-1" - 如果发现点一个就全开/全关，八成是多个 checkbox 被 JS 或表单逻辑意外同步了状态，或 CSS 选择器没加足够限定（比如漏写了父容器 class）
<div> 或换行缩进都可能让整个折叠逻辑静默失效。这不是浏览器 bug，是 CSS 选择器本身的语义限制。 
