本文介绍一种无需 javascript 的纯 css 方案，利用 :checked 伪类与相邻兄弟选择器（+）实现点击复选框切换关联内容的显示与隐藏。
在现代前端开发中，有时我们希望以最轻量的方式实现交互效果——比如点击一个复选框，动态显示或隐藏一组选项。虽然 JavaScript 是常规解法，但纯 CSS 同样可以优雅完成，关键在于正确使用 :checked 伪类 和 相邻兄弟选择器 +。
✅ 正确的 HTML 结构是前提
CSS 的 + 选择器只能匹配紧跟在前一元素之后的同级兄弟元素。因此，目标容器（如 .checkbox）必须紧接在 <input type="checkbox"> 元素之后，且二者处于同一父级下：
<fieldset>
<div>
Pincha para recibir información:
<!-- 注意：input 必须直接位于 .checkbox 之前 -->
<input type="checkbox" id="expand" class="toggle-checkbox">
<div class="checkbox">
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Gran Canaria</p>
<p><input type="checkbox"> Lanzarote</p>
<p><input type="checkbox"> Fuerteventura</p>
<p><input type="checkbox"> La Palma</p>
<p><input type="checkbox"> El Hierro</p>
<p><input type="checkbox"> La Gomera</p>
</div>
</div>
</fieldset>⚠️ 注意：原代码中 id="expand" 的 <input> 被错误地赋予了 class="checkbox"，这会干扰选择器逻辑。应将 class="checkbox" 仅用于被控制的容器 <div>，而复选框本身建议使用语义化类名（如 toggle-checkbox）或仅依赖 id。
✅ 对应的纯 CSS 规则
只需两行核心样式即可实现显隐控制：
/* 默认隐藏目标容器 */
.checkbox {
display: none;
}
/* 当 #expand 处于选中状态时，显示其后紧邻的 .checkbox */
#expand:checked + .checkbox {
display: block;
}该方案完全依赖浏览器原生支持（所有现代浏览器均兼容），无 JS 依赖、无额外事件监听、无重排风险，性能极佳。
立即学习“前端免费学习笔记（深入）”；
? 常见误区与修复
- ❌ 错误写法：#expand:checked .checkbox → 这是在查找 #expand 内部的子元素，但 .checkbox 是其兄弟，非后代；
- ❌ 错误结构：.checkbox 不紧跟在 #expand 后（中间插入其他标签、换行符不影响，但 DOM 顺序不可变）；
- ❌ 类名冲突：复选框自身不应有 class="checkbox"，否则 #expand:checked + .checkbox 将尝试匹配它自己（无效）。
? 进阶提示（可选优化）
- 添加平滑过渡效果（注意：display 不可动画，可改用 opacity + max-height 或 visibility 配合 height）：
.checkbox { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease; } #expand:checked + .checkbox { opacity: 1; max-height: 500px; /* 设为足够容纳内容的高度 */ } - 若需支持“非相邻”元素，可借助 <label> 的 for 属性 + :has()（目前仅 Chrome 105+ / Safari 15.4+ 支持，暂不推荐生产环境使用）。
总结：纯 CSS 显隐控制的核心在于结构可控性与选择器精准性。只要确保复选框与目标容器为相邻兄弟关系，并合理运用 :checked + selector，即可零 JS 实现简洁、可靠、高性能的交互体验。
