本文介绍一种纯 css 方案：利用 `:checked` 伪类与相邻兄弟选择器（`+`）实现点击复选框显示/隐藏关联内容，无需任何 javascript，兼容现代浏览器且语义清晰。
在前端开发中，常需实现“点击展开/收起”交互效果。若仅需基础显隐控制，完全可借助 CSS 原生能力完成，避免引入 JS 的额外开销与复杂性。
核心原理在于：
- 利用 <input type="checkbox"> 的 :checked 状态作为触发条件；
- 使用 相邻兄弟选择器 + 精准定位紧随其后的目标容器（而非后代选择器 ` 或子选择器>），因为原始 HTML 中.checkbox`<div> 是复选框的下一个同级元素，而非其后代；
- 通过初始 display: none 隐藏内容，再用 #expand:checked + .checkbox { display: block; } 实现状态切换。
✅ 正确的 CSS 写法如下：
/* 默认隐藏目标容器 */
.checkbox {
display: none;
}
/* 当 #expand 被勾选时，显示其后紧跟的 .checkbox 元素 */
#expand:checked + .checkbox {
display: block;
}⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- HTML 结构中，.checkbox <div> 必须紧接在 #expand 复选框之后（中间不能有其他标签或文本节点），否则 + 选择器将失效；
- 不要将 .checkbox 类同时用于复选框本身（如 <input class="checkbox" id="expand">）和目标容器——这会造成语义混淆且样式冲突。建议为控制开关使用 id="expand"，为目标容器单独使用 class="expand-content" 等更清晰的命名；
- 若需过渡动画（如淡入），可补充 opacity 和 transition，但注意 display 无法过渡，需改用 visibility + opacity 组合方案。
? 推荐优化后的 HTML 结构示例：
<fieldset>
<div>
Pincha para recibir información:
<input type="checkbox" id="expand" />
<label for="expand" style="margin-left: 8px; cursor: pointer;">▼ Expand</label>
<div class="expand-content">
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Gran Canaria</p>
<p><input type="checkbox"> Lanzarote</p>
<!-- 更多选项... -->
</div>
</div>
</fieldset>对应优化 CSS：
.expand-content {
display: none;
margin-top: 8px;
padding-left: 20px;
}
#expand:checked + label + .expand-content {
display: block;
}（此变体通过 label 占位，提升可访问性与点击区域）
总结：纯 CSS 显隐控制轻量、可靠、易维护，适用于表单折叠、FAQ 展开等场景。只要掌握 :checked 与 + / ~ 选择器的配合逻辑，即可零 JS 实现优雅交互。
