:checked伪类仅适用于checkbox/radio元素自身，需通过+或~选择器联动其他元素；:indeterminate只能由JS设置且与:checked互斥。
css:checked 伪类只能作用于
它不会自动影响父元素或后续兄弟元素以外的任意节点——这是初学者最容易误解的一点。你不能写 .wrapper:checked，因为 .wrapper 不是表单控件；只有 input[type="checkbox"] 自身能匹配 :checked。实际应用中，必须借助 DOM 结构关系（如相邻兄弟选择器 + 或通用兄弟选择器 ~）来联动其他元素。
常见错误现象：
- 写了
div.checked { ... }期待样式生效 → 实际无效，:checked不是自定义 class - 尝试用
:checked直接选中 label 文本颜色 → 必须 label 是 input 的兄弟或父级，且用正确选择器连接
用 input + label 实现点击 label 切换复选框并高亮文字
这是最典型、兼容性最好的用法：把 放在 前面，用 + 选择其后紧邻的 label。label 必须显式绑定 for 或包裹 input 才能点击触发，但样式控制靠的是 CSS 关系。
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
#agree:checked + label {
color: #007bff;
font-weight: bold;
}
注意点：
-
id和for值必须完全一致（区分大小写） -
+要求 label 紧跟在 input 后面，中间不能有其他标签（包括空格换行在某些旧浏览器中也可能破坏匹配） - 若想支持点击 label 也触发样式变化，label 内容需可交互（默认即可），无需额外 JS
用 input ~ .target 控制更远位置的元素（如提示区块）
当需要影响非相邻元素（比如 checkbox 下方隔了几行的
），改用通用兄弟选择器
~。它匹配同一父容器内位于该 input 之后的所有指定元素，不限紧邻。
基础设置
高级选项已启用
CSS：
