css伪类:checked与+选择器结合使用

使用:checked与+结合可实现表单控件选中后样式化后续元素；2. 常用于自定义复选框、展开内容、开关效果；3. 需确保目标为直接相邻兄弟，否则可用~替代；4. 适用于轻量交互，复杂逻辑仍需JavaScript。

当使用CSS伪类 :checked 与相邻兄弟选择器 + 结合时，可以实现根据表单控件（如复选框或单选按钮）的选中状态来样式化其后的元素。这种组合在无需JavaScript的情况下创建交互式界面非常有用。

基本原理

:checked 用于匹配被选中的单选按钮、复选框或下拉选项。+ 是相邻兄弟选择器，它选择紧接在某元素后的同级元素。

结合使用时，你可以这样写：

input[type="checkbox"]:checked + label {
  color: red;
}

这段代码的意思是：当复选框被选中时，其后面的 label 文字颜色变为红色。

常见应用场景

• 自定义复选框或单选按钮样式：隐藏原生控件，用CSS绘制更美观的图标。
• 展开/收起内容：通过勾选复选框显示或隐藏后续的内容区域。
• 开关切换效果：实现类似toggle开关的视觉反馈。

实际示例：点击切换显示内容

HTML结构：

点击展开
这里是被隐藏的内容

CSS样式：

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

说明：当复选框被选中时，通过 + 和后续选择器找到紧跟在label之后的 .content 并显示它。

注意事项

确保HTML结构中目标元素确实是选中元素的直接相邻兄弟，否则选择器不会生效。例如：

• 必须保证 input 和要控制的元素之间没有其他标签阻断。
• 若中间有其他元素，可考虑使用通用兄弟选择器 ~ 替代 +。
• 该方法适用于静态样式切换，复杂逻辑仍需JavaScript辅助。