:checked 伪类结合 + 相邻兄弟选择器可实现基于复选框或单选按钮状态的视觉切换效果，如开关、手风琴菜单和内容显隐。其原理是 :checked 作用于选中的 input[type="checkbox"] 或 input[type="radio"]，+ 选择紧跟其后的兄弟元素，从而控制样式显示。例如通过 #toggle:checked + label + .content 控制 .content 的 display 属性实现内容切换；在折叠面板中利用 max-height 和 transition 实现动画效果。关键点包括：目标元素必须为后续相邻兄弟、推荐隐藏 input 并用 label 触发交互、label 的 for 必须关联 input 的 id。该方法无需 JavaScript，轻量且兼容性好。
使用 :checked 伪类配合 + 相邻兄弟选择器，可以实现基于复选框或单选按钮状态的视觉切换效果，无需 JavaScript。这种方法常用于创建开关、手风琴菜单或内容显隐切换。
基本原理说明
:checked 作用于被选中的 input[type="checkbox"] 或 input[type="radio"]。+ 可以选择紧跟其后的兄弟元素。结合两者，就能控制其他元素的样式是否显示。
实现一个简单的开关切换
以下是一个通过点击复选框来切换文字显示/隐藏的例子：
<input type="checkbox" id="toggle"><label for="toggle">点击我切换内容</label>
<div class="content">这里是被切换显示的内容</div>
对应的 CSS：
立即学习“前端免费学习笔记（深入）”；
.content {
display: none;
}
#toggle:checked + label + .content {
display: block;
}
说明：当 checkbox 被选中时，:checked 生效，+ label 表示选中后面的 label，再 + .content 表示选中 label 后面的 .content 元素，从而让它显示。
更实用的场景：折叠面板
可以用来做无需 JS 的折叠菜单：
<input type="checkbox" id="panel-toggle" style="display:none;"><label for="panel-toggle">展开/收起面板</label>
<div class="panel">
<p>这里是面板内容…</p>
</div>
CSS 样式：
.panel {max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#panel-toggle:checked + label + .panel {
max-height: 200px;
}
这样就能实现带过渡动画的展开收起效果。label 可点击，且隐藏了 input 仍能正常工作。
关键注意事项
- 目标元素必须是 :checked 元素的后续相邻兄弟元素，中间不能插入其他标签
- 可通过 + 连续选择多个兄弟（如 + label + .content）
- 推荐将 input 隐藏（display:none），用 label 做视觉触发
- label 的 for 属性必须与 input 的 id 对应，确保可点击
