复选框无法直接设置文字样式，需通过:checked伪类与label关联实现选中后文字变色；推荐显式关联（id+for）或隐式包裹（input嵌套在label内），CSS用:checked + label控制样式。
复选框（input[type="checkbox"]）本身不可直接设置文字样式，但可以通过 :checked 伪类 + label 关联实现“选中后改变文字样式”的效果。关键在于：复选框和文字必须通过 for 属性与 id 关联，或让 label 包裹复选框，才能触发联动。
确保 HTML 结构正确
两种推荐写法，任选其一：
-
显式关联：复选框有
id，label用for指向它 -
隐式包裹：把
input直接放在label内部（更简洁、无需 id）
✅ 推荐使用包裹方式，语义清晰且不易出错：
用 :checked 选择器定位已选中的 label
CSS 中不能直接给 input:checked 加文字样式（它没文本内容），但可以利用兄弟/父级关系影响关联的 label。由于是包裹结构，可使用 input:checked + label 不行（不是兄弟），而应借助 label 包含 input 的特性 —— 实际上更可靠的方式是：对 label 设置样式，再用 input:checked 的父级状态来切换。但注意：CSS 无法向上选择父元素。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解法：把样式写在 label 上，用 input:checked 的相邻或后代关系控制。对于包裹结构，最直接的是：
但更通用且兼容的做法是：给 label 添加 class 或用属性选择器，配合 :checked 控制内部文字。不过最简单稳定的方案是：
- 把文字单独包在
span或直接用label文本内容 - 利用
label包裹input的结构，写 CSS： label input[type="checkbox"]:checked ~ span { /* 样式 */ }（需 span 在 input 后） - 或者更推荐：用
label自身作为样式载体，结合:has()（现代浏览器支持）
兼容性好、零 JS 的经典写法
不依赖 :has()，适配所有主流浏览器（包括旧版 Chrome/Firefox/Edge）：
- HTML 使用显式关联（带 id 和 for）
- CSS 利用
input:checked + label选择紧邻的 label（兄弟选择器）
示例：
CSS：
#agree:checked + label {color: #28a745;
text-decoration: underline;
font-weight: 600;
}
进阶：加图标或过渡动画
可在 label 前插入自定义勾选图标，增强视觉反馈：
- 用
label::before显示 ✅，默认隐藏；input:checked + label::before设为display: inline - 添加
transition: color 0.2s让颜色变化更柔和 - 避免用
!important，优先靠选择器权重控制
例如：
#agree + label::before { content: "⬜ "; margin-right: 6px; }#agree:checked + label::before { content: "✅ "; color: #28a745; }
