原生 checkbox 无法直接用 css 选中时改变关联 label 颜色，需依赖结构（label 包裹 input + :checked + 相邻选择器）、现代 :has() 伪类或 javascript 监听 change 事件切换 class 实现，同时注意无障碍支持。
原生 <input type="checkbox"> 无法直接用 CSS 选中时改变其关联的 <label></label> 颜色——因为 :checked 伪类只作用于 checkbox 自身，不自动影响兄弟或父级元素。必须靠 DOM 结构配合选择器或 JS 实现。
用 label 包裹 input + :checked + 相邻选择器
这是最轻量、无需 JS 的方案，但要求 HTML 结构严格：input 必须在 label 内，且 label 文本紧随 input 后（或用 for 绑定也行，但相邻选择器失效）。
-
input和要变色的文本必须是同一label的直接子节点，且input在前 - 写法：
input:checked + span { color: #2196F3; }（假设文本放在<span></span>里） - 不能用
input:checked ~ span，因为~是通用兄弟选择器，会匹配所有后续span，容易误触 - 注意：Chrome/Firefox/Safari 均支持，但若
input被设为display: none，部分旧版 Safari 可能丢掉:checked状态渲染
用 for 属性 + :has()（现代浏览器专属）
:has() 允许你根据子元素状态反向选择父级，比如「当内部 checkbox 选中时，给 label 加样式」。但它目前仅在 Chrome 105+、Firefox 119+、Safari 15.4+ 支持，IE 和旧 Edge 完全不支持。
- HTML 结构自由：
<input id="opt1"><label for="opt1">选项一</label> - CSS 写法：
label:has(input:checked) { color: #4CAF50; } - 别写成
label:has(:checked)——:checked不是独立元素，必须带标签名 - 若需兼容 IE 或旧版本，此方案不可用；生产环境建议加 @supports 检测
用 JavaScript 监听并切换 class（兼容性最强）
当结构不固定、需支持老浏览器，或要联动其他逻辑（如禁用/高亮相关区域）时，JS 是唯一可靠路径。
- 监听
change事件，而非click——避免空格键触发时漏掉 - 推荐用
classList.toggle('selected', e.target.checked)，而不是手动增删 - 不要直接改
style.color，统一走 CSS 类控制，方便主题切换和维护 - 示例关键片段：
document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.addEventListener('change', e => e.target.closest('label').classList.toggle('checked', e.target.checked)))
真正容易被忽略的是：label 文本颜色变化后，无障碍阅读器是否仍能正确播报状态。如果用了 display: none 隐藏 checkbox，务必保留 aria-checked 同步更新，否则屏幕阅读器可能读不出当前选中态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
