17370845950

: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"]。+ 可以选择紧跟其后的兄弟元素。结合两者，就能控制其他元素的样式是否显示。

实现一个简单的开关切换

以下是一个通过点击复选框来切换文字显示/隐藏的例子：

点击我切换内容
这里是被切换显示的内容

对应的 CSS：

.content {
  display: none;
}

#toggle:checked + label + .content {
  display: block;
}

说明：当 checkbox 被选中时，:checked 生效，+ label 表示选中后面的 label，再 + .content 表示选中 label 后面的 .content 元素，从而让它显示。

更实用的场景：折叠面板

可以用来做无需 JS 的折叠菜单：

展开/收起面板

  

这里是面板内容…

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 对应，确保可点击

基本上就这些。利用这种模式，你可以构建出多种交互式 UI 组件，轻量且兼容性良好。