css伪类:checked与+选择器结合使用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-11-22

浏览次数：次

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

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

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

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

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

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

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

HTML结构：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

<input type="checkbox" id="toggle">
<label for="toggle">点击展开</label>
<div class="content">这里是被隐藏的内容</div>

CSS样式：

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

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

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

基本上就这些，掌握这个技巧能让你做出轻量级交互效果。

以上就是css伪类:checked与+选择器结合使用的详细内容，更多请关注其它相关文章！