通过:checked + label选择器可实现点击标签改变复选框状态并动态更新样式。1. 结构上将input[type="checkbox"]置于label前且为直接兄弟；2. 使用:checked伪类匹配选中状态，结合+选择器作用于相邻label；3. 隐藏原生复选框，利用::before伪元素创建自定义勾选符号；4. 选中时通过样式变化实现视觉反馈，如背景变色或符号替换；5. 适用于主题切换、筛选项高亮等无JavaScript交互场景。关键在于HTML顺序与选择器精确匹配。
当用户点击标签（label）时，复选框（checkbox）的状态会改变，利用 :checked + label 选择器可以基于复选框是否被选中来动态改变其后相邻的 label 的样式。这种技巧常用于自定义复选框外观、实现无JavaScript的交互效果。
基本原理：:checked 与相邻兄弟选择器结合
:checked 是一个伪类，匹配处于“选中”状态的单选按钮或复选框。+ 是相邻兄弟选择器，表示选取紧接在某元素后的另一个元素。
结构上，需将 放在 前面，并确保 label 是 input 的下一个兄弟元素：
CSS 中这样写：
立即学习“前端免费学习笔记（深入）”；
#option1:checked + label {
background-color: #4CAF50;
color: white;
padding: 5px;
border-radius: 4px;
}
当选中复选框时，其后的 label 背景变绿，文字变白。
隐藏默认复选框并创建自定义样式
为了完全控制外观，通常隐藏原生输入框，用 label 模拟视觉反馈：
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
content: "□";
margin-right: 8px;
}
input[type="checkbox"]:checked + label::before {
content: "✓";
color: #4CAF50;
margin-right: 8px;
}
这里使用 ::before 伪元素显示自定义勾选符号。未选中显示方框，选中后变为对号。
应用场景示例：开关式按钮或分类筛选
这种模式适合构建无需 JavaScript 的交互 UI，比如：
- 主题切换开关（深色/浅色）
- 表单中的多选筛选项
- 可展开/收起的内容区域（配合 ~ 选择器控制后续元素）
例如实现一个简单的标签高亮效果：
.filter-item:checked + label {
background: #007acc;
color: #fff;
border: 1px solid #005a9e;
}
用户点击 label 后，选项视觉上被“激活”，提升可用性。
基本上就这些——通过合理组织 HTML 结构和使用 :checked + label，能轻松实现响应用户操作的样式变化，不依赖 JavaScript 也能做出流畅交互。关键是 input 必须在 label 前且为直接前兄弟元素。
