HTML中直接写indeterminate属性无效，因其不能通过HTML设置，必须用JavaScript赋值checkbox.indeterminate = true；:indeterminate伪类仅响应此DOM属性变更，且需配合appearance: none和伪元素自定义样式，并同步设置aria-checked="mixed"以保障无障碍支持。
为什么直接写 indeterminate 属性没用
HTML 中写 <input type="checkbox" indeterminate> 或 indeterminate="true" 完全无效——浏览器会忽略它。:indeterminate 伪类只响应 JavaScript 对 DOM 元素的 indeterminate 属性赋值，且该属性是只读的（不能通过 setAttribute 设置）。必须用 checkbox.indeterminate = true 才能触发状态和样式匹配。
怎样让 :indeterminate 样式真正生效
原生 checkbox 的半选图形由系统控件渲染，大多数 CSS 属性（如 background-color、border）对它不起作用。要自定义样式，必须：
- 先用
appearance: none移除默认外观 - 用
::before或::after伪元素重绘勾选框 - 确保选择器优先级足够高，比如加类名：
.tree-node-checkbox:indeterminate::before，而不是仅写input:indeterminate - 注意 Chrome 和 Firefox 渲染差异：Chrome 半选是短横线，Firefox 是填充块，需分别适配
树形菜单中父子节点的 indeterminate 状态怎么同步
浏览器不会自动计算“部分子项被选中”并设为 indeterminate；这是纯业务逻辑，必须手动维护。常见错误是只更新 UI 而不更新数据状态，或在递归设置时引发事件循环。
- 每次子节点选中/取消时，向上遍历父节点，统计
checked数量和总子节点数 - 若
0 < checkedCount < totalCount，则设父节点indeterminate = true，同时保持其checked = false（或true，不影响显示） - 点击父节点时，
indeterminate会自动变为false，此时再按需设置checked并向下同步子节点 - 避免在
change回调里直接调用click()或再次触发select，容易造成无限递归
:indeterminate 和无障碍支持怎么配合
仅靠视觉样式无法传达“混合状态”给屏幕阅读器。必须补充 ARIA 语义：
立即学习“前端免费学习笔记（深入）”；
- 设置
aria-checked="mixed"（注意不是"indeterminate"） - 确保该属性与
indeterminate = true同步更新 - 不要依赖
checked值判断当前是否为半选——因为indeterminate = true时checked仍可能是false - 禁用状态下的半选需额外处理：
aria-disabled="true"+tabindex="-1"，否则键盘用户仍可聚焦并触发 change
最易被忽略的是：indeterminate 是瞬态控制标记，不是持久状态存储。每次数据刷新或组件重渲染后，必须重新执行 el.indeterminate = xxx，否则样式和语义都会丢失。
