:checked无法直接控制height动画，因它不产生可动画尺寸且height:auto不可过渡；需用max-height模拟，配合id/for精准关联及:checked~.content兄弟选择器，并排除移动端点击遮挡等陷阱。
为什么 :checked 不能直接控制 height 动画
因为 :checked 是表单控件（如 <input type="checkbox">）的状态伪类，它本身不产生可动画的尺寸属性；你无法对 height: auto 做 CSS 过渡——浏览器不知道“auto”该过渡到多高。
常见错误现象：transition: height 0.3s 写了但没动画，或者只在展开时动、收起时“啪”一下消失。
- 必须用固定高度（
height: 200px）或max-height模拟（推荐） -
max-height要设一个明显大于内容实际高度的值（比如max-height: 500px），否则动画会提前截断 - 内容高度动态变化时，硬写死
height值不可维护，max-height是唯一实用解
手风琴结构里 <input> 和 <label> 怎么配对才可靠
靠 id/for 关联是最稳妥的方式。用 <label> 包裹 <input> 虽然也能触发，但在嵌套折叠区域中容易误触发父级或相邻项。
使用场景：多个手风琴项并列，每项需独立开关，不能连带影响其他项。
立即学习“前端免费学习笔记（深入）”；
-
<input type="checkbox" id="accordion-1">必须有唯一id -
<label for="accordion-1">的for值必须完全匹配id，大小写和连字符都不能错 - 避免用
name或data-*属性替代id/for，CSS 选择器无法据此定位
:checked ~ .content 选择器失效的三个典型原因
这个组合选择器要求 .content 是 :checked 元素的**后续兄弟元素**，且在同一层 DOM 树中。稍有嵌套就断链。
常见错误现象：点击后内容不显示/不收起，开发者工具里看到 :checked 状态已变，但样式没生效。
-
.content被包在额外的<div>里，导致它不再是<input>的直接兄弟 -
<input>放在<label>内部，而.content在<label>外面 → 不满足兄弟关系 - 用了
:checked + .content（相邻兄弟），但中间插了空格文本节点或注释 → 实际不是“紧邻”
解决办法：把 <input> 提到最外层，和 .content 并列，用 :checked ~ .content（普通兄弟）更容错。
移动端点击无响应？检查这三处 CSS 隐藏陷阱
iOS Safari 和部分安卓 WebView 对 <input type="checkbox"> 的点击区域极其敏感，表面看着能点，其实没真正触发 :checked。
性能与兼容性影响：这些样式问题不会报错，但会让整个手风琴在真机上“失灵”，且很难调试。
-
<input>被设了opacity: 0但没加position: absolute→ 它仍占布局空间，可能被其他元素遮挡 -
label上写了pointer-events: none（比如为了透传点击），结果把input也一起禁了 - 父容器有
overflow: hidden且input的实际渲染位置超出边界 → iOS 下点击无效
最容易被忽略的是：在 Flex 或 Grid 容器中，<input> 默认 flex: 0 0 auto，如果没显式设 width/height，某些浏览器会把它压成 0×0 —— 看不见也点不着。
