:indeterminate伪类仅响应JavaScript设置的indeterminate属性布尔值，不支持HTML属性或用户交互直接触发；需先用element.indeterminate = true设置状态，再通过CSS定义样式，且与checked正交独立。
什么是 :indeterminate 伪类的实际作用
:indeterminate 不是“让复选框变半选”的开关，它只响应 DOM 中 indeterminate 属性的布尔状态。浏览器原生不支持通过 HTML 属性或用户点击直接设为半选；必须用 JavaScript 手动设置 element.indeterminate = true，CSS 才会生效。
常见误解是写 <input type="checkbox" indeterminate> —— 这个属性根本不会被解析，HTML 标准里没有 indeterminate 属性，只有 JS 可写的 indeterminate 属性（只读？不，它是可写的）。
如何正确触发 :indeterminate 样式
必须分两步：先用 JS 设置 indeterminate 状态，再用 CSS 定义样式。仅写 CSS 不起作用。
- 设置状态：
checkboxElement.indeterminate = true（注意不是setAttribute，也不影响checked） - 清除状态：
checkboxElement.indeterminate = false（恢复为正常 checked/unchecked 状态） -
indeterminate和checked是正交的：一个可以indeterminate=true同时checked=false，此时勾选图标消失，显示半选视觉
:indeterminate 的样式限制与绕过方案
浏览器对 :indeterminate 的样式支持有限：Chrome / Edge 支持 background-color、border、transform 等，但无法直接修改内部勾选符号（比如用 ::before 覆盖原生图标），因为原生 checkbox 的半选图形是 UA 样式硬编码的。
立即学习“前端免费学习笔记（深入）”；
真正可控的方式是隐藏原生控件 + 自定义外观：
- 用
appearance: none或-webkit-appearance: none移除默认样式 - 用
input[type="checkbox"]:indeterminate + label::before控制自定义半选图标（比如 ⬜ → ◼️ → ◻️） - 注意：Safari 对
:indeterminate的::before/::after支持不稳定，建议用 sibling label + absolute 定位图标配色
父子级联动中 indeterminate 的典型误用
在树形结构或全选/子项联动场景中，很多人试图靠 CSS 自动推导 :indeterminate 状态 —— 这不可能。浏览器不会根据子项 checked 状态自动设父项 indeterminate。
必须手写逻辑判断并显式设置：
- 监听所有子 checkbox 的
change事件 - 统计
checked数量和总数，若 0 parent.indeterminate = true，同时设parent.checked = false - 父 checkbox 被点击时，要区分：若当前是
indeterminate，则设为全选；否则按常规 toggle
漏掉 indeterminate = false 清除这一步，会导致状态卡死——这是最常被忽略的细节。
