多选框选中后仅改变关联label样式，核心是利用:checked伪类配合+或~选择器，前提是input与label满足DOM联动结构：推荐input在label内或同级并用for/id绑定，同时隐藏原生checkbox。
多选框（checkbox）选中后只改变其关联的 label 样式，核心是利用 :checked 伪类 + 相邻或通用兄弟选择器（+ 或 ~），前提是 HTML 结构中 input 和 label 要满足可联动的 DOM 关系。
✅ 正确的 HTML 结构是前提
有两种推荐写法，都能让 :checked 控制 label 样式：
-
方式一：input 在 label 内部（最简洁可靠）
此时无需 for/id，天然绑定，且支持直接用input:checked + label或更简单的input:checked ~ label（但注意层级）；实际常用的是把样式写在label上，通过父级input:checked触发：
```
✅ 推荐结构（input 和 label 同级，用 for/id 关联）：
```html```
这样 CSS 才能用 input:checked + label 精准控制紧邻的 label。
立即学习“前端免费学习笔记（深入）”；
✅ CSS 写法：用 + 或 ~ 选择器联动
假设 HTML 是同级结构（input 在 label 前）：
```css
input[type="checkbox"] { display: none; } /* 隐藏原生 checkbox */
input[type="checkbox"]:checked + label {
color: #007bff;
font-weight: bold;
background: #f8f9fa;
padding: 4px 8px;
border-radius: 4px;
}
```
说明：
-
input:checked + label：只匹配紧跟在选中 checkbox 后面的 第一个 label（相邻兄弟） -
input:checked ~ label：匹配后面所有同级 label（通用兄弟），慎用，避免误样式 - 务必先隐藏原生 checkbox（
display: none），否则会看到默认控件和自定义样式共存
✅ 进阶：label 包含文字+图标，只变文字颜色？
如果 label 里有内联元素（如 或图标），可以更精细控制：
```
```css
input#theme:checked + label span { color: #28a745; }
input#theme:checked + label .icon::before { content: "✓"; color: #28a745; }
```
这样就能做到「只改标签中的某部分」，不干扰整体布局。
⚠️ 常见失败原因
- label 没写
for属性，或for值与 input 的id不一致 → 点击无效，:checked 不触发 - input 没有
id，label 的for失效 → 结构断裂 - CSS 选择器写成
label:checked→ 错！label 本身没有 :checked，只有 input 有 - input 和 label 不是同级，中间隔了 div 等容器 →
+和~失效，需改用 JS 或调整结构
基本上就这些。关键就是结构对、选择器对、隐藏原生框——不需要 JS，纯 CSS 就能干净解耦样式与状态。
