: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 下方隔了几行的 基础设置 CSS： 关键限制： 复选框存在三种状态： 例如实现「全选按钮」的半选态视觉反馈： JS 设置其 所以正确做法是分开控制： 真正容易被忽略的是：~。它匹配同一父容器内位于该 input 之后的所有指定元素，不限紧邻。
#show-advanced:checked ~ .hint {
display: block;
color: #28a745;
}~ 只能在同一父级下生效；如果 .hint 在另一个 ~，如需兼容，得退回到 JS 控制 class 或用 + + 包裹结构~ 可能降低可维护性配合
:disabled 和 :indeterminate 处理混合状态:checked（全选）、:indeterminate（半选，常用于父子级联动）、:disabled（禁用）。三者可组合使用，但要注意优先级和触发方式。indeterminate = true 后，CSS 可这样写：#select-all:indeterminate {
background-color: #6c757d;
}
#select-all:checked:indeterminate {
/* 这种写法无效 —— :checked 和 :indeterminate 互斥 */
}
:indeterminate 单独设置样式（此时 input 未被用户点击，只是 JS 设置的状态）:checked 仅响应用户主动勾选:disabled，通常搭配透明度或灰阶:indeterminate 无法通过 HTML 属性触发，只能由 JS 设置 indeterminate 属性，且设置后会清空 checked 状态 —— 这一点不看 MDN 官方说明很容易踩坑。
