利用:checked伪类与+或~选择器结合，可实现无JavaScript的交互效果。通过隐藏的checkbox或radio控制后续元素的显示状态，配合label提升可操作性，使用max-height过渡实现动画，适用于开关面板、标签页等场景。
使用 CSS 的 :checked 伪类结合 + 相邻兄弟选择器，可以实现无需 JavaScript 的开关切换效果。这个方法常用于制作下拉菜单、标签页、暗黑模式切换等交互组件。
基本原理说明
:checked 可以选中被选中的单选框（radio）或复选框（checkbox）。+ 选择器能选中紧跟其后的相邻兄弟元素。通过这两者配合，就能在用户点击输入框时，控制后续元素的样式变化。
实现一个简单的开关面板
下面是一个点击 checkbox 展开或收起内容区域的例子：
<input type="checkbox" id="toggle"> <label for="toggle">点击展开/收起</label> <div class="panel"> 这里是被隐藏的内容 </div>
对应的 CSS 样式：
立即学习“前端免费学习笔记（深入）”；
#toggle {
display: none; /* 隐藏 checkbox */
}
<p>.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}</p><h1>toggle:checked + label + .panel {</h1><p>max-height: 100px; /<em> 根据内容调整高度 </em>/
padding: 10px;
}</p>解释：
- checkbox 被隐藏，但依然可点击 label 触发状态变化
- 初始状态下 panel 的 max-height 为 0，不可见
- 当 checkbox 被选中时，:checked 生效，+ 选择器找到后面的 .panel 并改变其样式
- transition 实现平滑展开动画
使用 radio 按钮切换不同内容
如果想实现多选项切换（类似标签页），可以用多个 radio 按钮：
<input type="radio" name="tab" id="tab1" checked> <label for="tab1">首页</label> <p><input type="radio" name="tab" id="tab2"> <label for="tab2">设置</label></p><p><div class="content"> <div class="page" id="home">首页内容</div> <div class="page" id="setting">设置内容</div> </div></p>
CSS 控制显示哪个页面：
.page { display: none; }
<h1>tab1:checked ~ .content #home,</h1><h1>tab2:checked ~ .content #setting {</h1><p>display: block;
}</p>这里用了 ~ 通用兄弟选择器，因为 .content 不是 radio 的直接下一个元素。
关键技巧总结
- 用 label 关联 input，提升可点击区域和可用性
- 隐藏 input 时用 display: none 或 opacity: 0，避免布局问题
- 动画建议用 max-height 过渡代替 height，因为 height: auto 不支持过渡
- 多个切换项时推荐使用 radio，保证互斥选择
基本上就这些。掌握 :checked 和 +（或 ~）的组合，就能做出很多轻量级交互效果，适合静态页面或想减少 JS 负担的场景。
