:indeterminate伪类仅在JavaScript显式设置checkbox.indeterminate = true时生效，HTML中直接写indeterminate属性无效；需配合appearance: none才能自定义样式，且选择器优先级要足够高。
怎么让 :indeterminate 生效
浏览器只在 JavaScript 显式设置 indeterminate 属性为 true 时，才触发 :indeterminate 伪类——它不会因为“部分子项被选中”自动激活。也就是说，HTML 中直接写 <input type="checkbox" indeterminate> 是无效的（会忽略），必须用 JS 设置。
-
checkbox.indeterminate = true才真正启用半选状态，此时:indeterminate才匹配 - 设置后，
checked值仍为false（注意：不是null或undefined），视觉上显示为横杠或短横线 - 用户点击该控件时，
indeterminate自动变为false，并按常规逻辑切换checked
:indeterminate 样式为什么没生效
最常见原因是：样式规则被更具体的 selector 覆盖，或者用了不支持该伪类的属性。比如 background-color、border 对原生 checkbox 无效（渲染由系统控件决定），必须用 appearance: none + 自定义绘制。
- 必须配合
appearance: none才能自由控制外观；否则大多数 CSS 属性不起作用 - 不能只写
input:indeterminate { … }就完事——要确保选择器优先级足够，例如加类名：.tree-checkbox:indeterminate - Firefox 旧版本（:indeterminate 在非
<input type="checkbox">上使用，别误用到 radio 或其他元素
模拟树形组件中的“半选”视觉效果
真实业务里，“父节点半选”是逻辑状态，不是浏览器原生行为。你需要手动维护 indeterminate 状态，并同步更新 DOM。
- 监听子 checkbox 的
change事件，统计checked数量和总数量 - 若
0 < checkedCount < totalCount，则设置父节点parentCheckbox.indeterminate = true，同时设parentCheckbox.checked = false - 避免在
indeterminate = true时调用click()或触发change，这会导致状态错乱 - 示例关键行：
parent.indeterminate = (checkedCount > 0 && checkedCount < children.length);
兼容性与降级要点
:indeterminate 在 Chrome/Firefox/Safari/Edge（≥79）都支持，但 iOS Safari ≤14.5 有渲染 bug：横杠位置偏移或不显示。不能依赖它做核心交互反馈。
立即学习“前端免费学习笔记（深入）”；
- 不要把“是否半选”作为唯一判断依据传给后端——它只是 UI 提示，真实状态应来自你维护的树结构数据
- 无障碍方面：设置
aria-checked="mixed"与indeterminate = true同步，否则屏幕阅读器无法识别 - 如果项目需支持 IE，必须完全放弃
:indeterminate，改用自定义 class（如.is-indeterminate）+ SVG 图标模拟
indeterminate 是个“开关”，不是“状态推导结果”；它只管视觉提示，背后的数据一致性得你自己盯住。 
