:checked伪类仅适用于checkbox/radio元素自身，需通过+或~选择器联动其他元素；:indeterminate只能由JS设置且与:checked互斥。
css:checked 伪类只能作用于 <input type="checkbox"> 元素本身
它不会自动影响父元素或后续兄弟元素以外的任意节点——这是初学者最容易误解的一点。你不能写 .wrapper:checked，因为 .wrapper 不是表单控件；只有 input[type="checkbox"] 自身能匹配 :checked。实际应用中，必须借助 DOM 结构关系（如相邻兄弟选择器 + 或通用兄弟选择器 ~）来联动其他元素。
常见错误现象：
- 写了
div.checked { ... }期待样式生效 → 实际无效，:checked不是自定义 class - 尝试用
:checked直接选中 label 文本颜色 → 必须 label 是 input 的兄弟或父级，且用正确选择器连接
用 input + label 实现点击 label 切换复选框并高亮文字
这是最典型、兼容性最好的用法：把 <input> 放在 <label> 前面，用 + 选择其后紧邻的 label。label 必须显式绑定 for 或包裹 input 才能点击触发，但样式控制靠的是 CSS 关系。
<input type="checkbox" id="agree"> <label for="agree">我已阅读并同意条款</label>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
#agree:checked + label {
color: #007bff;
font-weight: bold;
}注意点：
-
id和for值必须完全一致（区分大小写） -
+要求 label 紧跟在 input 后面，中间不能有其他标签（包括空格换行在某些旧浏览器中也可能破坏匹配） - 若想支持点击 label 也触发样式变化，label 内容需可交互（默认即可），无需额外 JS
用 input ~ .target 控制更远位置的元素（如提示区块）
当需要影响非相邻元素（比如 checkbox 下方隔了几行的 <div class="hint">），改用通用兄弟选择器 ~。它匹配同一父容器内位于该 input 之后的所有指定元素，不限紧邻。
<input type="checkbox" id="show-advanced"> <p>基础设置</p> <div class="hint">高级选项已启用</div>
CSS：
#show-advanced:checked ~ .hint {
display: block;
color: #28a745;
}关键限制：
-
~只能在同一父级下生效；如果.hint在另一个<div>里，且和 input 不同级，就无法匹配 - IE8 不支持
~，如需兼容，得退回到 JS 控制 class 或用++ 包裹结构 - 性能上无明显差异，但过度嵌套使用
~可能降低可维护性
配合 :disabled 和 :indeterminate 处理混合状态
复选框存在三种状态：:checked（全选）、:indeterminate（半选，常用于父子级联动）、:disabled（禁用）。三者可组合使用，但要注意优先级和触发方式。
例如实现「全选按钮」的半选态视觉反馈：
<input type="checkbox" id="select-all">
JS 设置其 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 官方说明很容易踩坑。
