要选中未被勾选的复选框，应使用 :not(:checked) 伪类控制关联元素（如 label 或其子元素）样式，而非直接设置复选框本身；推荐默认设未选中态样式，再用 :checked 覆盖已选中状态，以提升兼容性与可维护性。
要选中未被勾选的复选框，可以使用 :not(:checked) 伪类组合，但需注意：该选择器本身不能直接作用于 元素来设置其样式（因为复选框原生控件无法通过 CSS 设置“未选中时的外观”），真正有效的是用它来控制**关联元素**（比如旁边的标签、父容器或后续兄弟元素）的样式。
正确用法：控制关联标签或容器
常见做法是将 与复选框显式关联（用 for 属性或包裹结构），再用 :not(:checked) 选中未勾选状态下的 label 或其子元素：
- HTML 推荐结构（隐式关联）：
- CSS 示例（给未选中时的 label 添加灰色文字）：
label input[type="checkbox"]:not(:checked) + span { color: #999; }
或更稳妥地（利用 label 包裹）：
label input[type="checkbox"]:not(:checked) ~ span { opacity: 0.7; }
替代方案：用 :checked 反向控制更可靠
实际开发中，:not(:checked) 在部分旧浏览器（如 IE）支持不完整，且逻辑易出错。更推荐写法是默认样式设为“未选中态”，再用 :checked 覆盖已选中状态：
- 默认设置 label 样式（即未选中时）：
label { color: #666; font-weight: normal; } - 仅当勾选后才改变：
input[type="checkbox"]:checked + label { color: #007bff; font-weight: bold; }
注意事项
-
:not(:checked)只对和有效，对其他类型无效 - 不能用它修改复选框本身的方框（如背景、边框），因原生 checkbox 的 UI 由系统渲染，CSS 可控性极低；如需自定义外观，应隐藏原生控件，用
::before/::after模拟 - 确保 HTML 结构满足 CSS 选择器的层级关系（如相邻兄弟
+、通用兄弟~或父子关系）
