纯CSS可通过:checked与兄弟选择器实现复选框控制容器显隐，需确保复选框与容器同级且在DOM中位于其前；推荐用label关联提升移动端点击体验，并配合aria属性保障可访问性。
复选框选中时显示关联容器，用 :checked + + 或 ~ 就够了
不用 JS，纯 CSS 就能实现“点一下复选框，下面的区域展开/收起”，关键在于复选框必须和目标容器在 DOM 中处于正确的位置关系。最常用的是相邻兄弟（+）或通用兄弟（~）选择器，它们只对**同级、且在复选框之后**的元素生效。
常见错误是把容器写在复选框前面，或者隔了父容器——这时选择器完全不匹配，样式不会触发。
- 复选框
<input type="checkbox">必须是普通表单控件（不能是display: none或visibility: hidden，否则 iOS Safari 会失去交互响应） - 目标容器要跟复选框同级，且紧接其后（用
+）或在其后任意位置（用~） - 初始状态建议用
display: none配合input:not(:checked) ~ .target { display: none; }控制，避免 FOUC
:checked + .container 和 :checked ~ .container 的区别很实际
前者只作用于紧挨着的下一个同级元素；后者作用于后面所有同级匹配元素。选哪个取决于结构：
- 如果容器紧跟在
<input>后面（中间没其他同级标签），用+更精准，性能略好 - 如果中间穿插了标签（比如
<label>、<p>），只能用~ - 注意：
~不跨父级——子元素不在“兄弟”范围内，嵌套在<div>里的容器不会被选中
示例结构（有效）：
立即学习“前端免费学习笔记（深入）”；
<input id="toggle" type="checkbox"> <label for="toggle">显示详情</label> <div class="details">这里是内容</div>
对应 CSS：
input#toggle:not(:checked) ~ .details { display: none; }
input#toggle:checked ~ .details { display: block; }
移动端点击区域小、iOS Safari 有兼容细节
原生 <input type="checkbox"> 默认尺寸小，用户很难点中，尤其在手机上。直接加 width/height 会破坏语义和可访问性，正确做法是用 <label> 包裹或关联。
- 给
<input>加id，<label>用for属性绑定，点击 label 即等效点击 checkbox - iOS Safari 对
:checked的响应有时延迟（尤其快速连点），可加touch-action: manipulation到 input 上缓解 - 不要用
opacity: 0隐藏 checkbox —— 某些 Android 浏览器会因此禁用状态切换 - 需要动画？
max-height+overflow: hidden比display更合适，但注意max-height值需预估，设为0→500px是常见 hack
别忽略可访问性和键盘操作
仅靠鼠标点 <label> 不够：键盘用户按 Tab 进入复选框后，用空格键切换状态，此时显隐逻辑必须同步生效。CSS 本身支持这点，但容易出问题的地方是：
- 容器设置了
display: none后，其中的内容对屏幕阅读器不可见 —— 如果这是关键信息，需确认是否符合 WCAG 要求 - 若希望键盘焦点能进入容器内部，得确保容器没有
display: none（改用visibility: hidden+height: 0等组合，并管理tabindex） - 用
aria-expanded和aria-controls显式声明状态，比纯 CSS 更健壮（例如：<input aria-controls="details-1"><div id="details-1">）
真实项目里，视觉切换只是表层；状态同步、焦点管理、语义表达，这三块漏掉任何一块，都可能让功能在特定设备或辅助工具下失效。
