利用:checked伪类与+或~选择器结合，可实现无JavaScript的交互效果。通过隐藏的checkbox或radio控制后续元素的显示状态，配合label提升可操作性，使用max-height过渡实现动画，适用于开关面板、标签页等场景。
使用 CSS 的 :checked 伪类结合 + 相邻兄弟选择器，可以实现无需 JavaScript 的开关切换效果。这个方法常用于制作下拉菜单、标签页、暗黑模式切换等交互组件。
基本原理说明
:checked 可以选中被选中的单选框（radio）或复选框（checkbox）。+ 选择器能选中紧跟其后的相邻兄弟元素。通过这两者配合，就能在用户点击输入框时，控制后续元素的样式变化。
实现一个简单的开关面板
下面是一个点击 checkbox 展开或收起内容区域的例子：
这里是被隐藏的内容
对应的 CSS 样式：
立即学习“前端免费学习笔记（深入）”；
#toggle { display: none; /* 隐藏 checkbox */}.panel {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
toggle:checked + label + .panel {
max-height: 100px; / 根据内容调整高度 /padding: 10px;}
解释：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 
checkbox 被隐藏，但依然可点击 label 触发状态变化初始状态下 panel 的 max-height 为 0，不可见当 checkbox 被选中时，:checked 生效，+ 选择器找到后面的 .panel 并改变其样式transition 实现平滑展开动画
使用 radio 按钮切换不同内容
如果想实现多选项切换（类似标签页），可以用多个 radio 按钮：
首页内容设置内容
CSS 控制显示哪个页面：
.page { display: none; }tab1:checked ~ .content #home,
tab2:checked ~ .content #setting {
display: block;}
这里用了 ~ 通用兄弟选择器，因为 .content 不是 radio 的直接下一个元素。
关键技巧总结
用 label 关联 input，提升可点击区域和可用性隐藏 input 时用 display: none 或 opacity: 0，避免布局问题动画建议用 max-height 过渡代替 height，因为 height: auto 不支持过渡多个切换项时推荐使用 radio，保证互斥选择
基本上就这些。掌握 :checked 和 +（或 ~）的组合，就能做出很多轻量级交互效果，适合静态页面或想减少 JS 负担的场景。
以上就是如何用css :checked与+选择器制作切换效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1048930.html
微信扫一扫 
支付宝扫一扫 
