如何用css :checked与+选择器制作切换效果

利用: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>

解释：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

• 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 负担的场景。

以上就是如何用css :checked与+选择器制作切换效果的详细内容，更多请关注php中文网其它相关文章！