使用:checked与+结合可实现表单控件选中后样式化后续元素；2. 常用于自定义复选框、展开内容、开关效果；3. 需确保目标为直接相邻兄弟，否则可用~替代；4. 适用于轻量交互，复杂逻辑仍需JavaScript。
当使用CSS伪类 :checked 与相邻兄弟选择器 + 结合时，可以实现根据表单控件（如复选框或单选按钮）的选中状态来样式化其后的元素。这种组合在无需JavaScript的情况下创建交互式界面非常有用。
基本原理
:checked 用于匹配被选中的单选按钮、复选框或下拉选项。+ 是相邻兄弟选择器，它选择紧接在某元素后的同级元素。
结合使用时，你可以这样写：
input[type="checkbox"]:checked + label {
color: red;
}
这段代码的意思是：当复选框被选中时，其后面的 label 文字颜色变为红色。
常见应用场景
- 自定义复选框或单选按钮样式：隐藏原生控件，用CSS绘制更美观的图标。
- 展开/收起内容：通过勾选复选框显示或隐藏后续的内容区域。
- 开关切换效果：实现类似toggle开关的视觉反馈。
实际示例：点击切换显示内容
HTML结构：
<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结构中目标元素确实是选中元素的直接相邻兄弟，否则选择器不会生效。例如：
- 必须保证 input 和要控制的元素之间没有其他标签阻断。
- 若中间有其他元素，可考虑使用通用兄弟选择器 ~ 替代 +。
- 该方法适用于静态样式切换，复杂逻辑仍需JavaScript辅助。
基本上就这些，掌握这个技巧能让你做出轻量级交互效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
