:indeterminate选择器需JavaScript显式设置indeterminate=true才生效，HTML属性无效；必须配合appearance:none才能自定义样式，且需用::before/::after模拟半选状态。
如何让 :indeterminate 选择器真正匹配复选框
它不会自动生效——哪怕你写了 input[type="checkbox"]:indeterminate，浏览器也完全无视，除非你用 JavaScript 显式设置 indeterminate = true。HTML 中写 indeterminate 属性（如 <input type="checkbox" indeterminate>）是无效的，解析时会被忽略。
必须这样操作：
const cb = document.querySelector('#my-checkbox');-
cb.indeterminate = true;—— 这行之后，:indeterminate才开始匹配 -
cb.checked此时仍为false（或true），和indeterminate状态互不干扰 - 用户点击后，
indeterminate自动变回false，checked按常规翻转
为什么 :indeterminate 样式没反应
最常见原因是：你没关掉浏览器默认渲染机制。原生 <input type="checkbox"> 的外观由操作系统控件决定，background-color、border、width 这些属性根本不起作用。
必须配合 appearance: none 才能接管绘制：
立即学习“前端免费学习笔记（深入）”；
- 先加
input[type="checkbox"] { appearance: none; } - 再写
input[type="checkbox"]:indeterminate { /* 自定义样式 */ } - 确保选择器权重足够高，比如用
.tree-node input:indeterminate而非单纯input:indeterminate - 注意：Chrome 的半选视觉是短横线，Firefox 是蓝色方块，别指望统一表现
怎么给 :indeterminate 写实际可用的样式
不能只改 <input> 本身，得靠伪元素模拟图形。因为原生控件的“横杠”不在元素盒模型内，而是在 ::before 或 ::after 里（各浏览器实现不同）。
一个最小可行示例：
input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border: 2px solid #999;
}
input[type="checkbox"]:indeterminate::before {
content: "";
display: block;
width: 8px;
height: 2px;
background: #333;
margin: 5px auto 0;
}要点：
-
::before必须设display: block才能生效 - 不要依赖
accent-color控制半选色——它只影响勾选态，对:indeterminate无效 - 如果用了自定义 label 包裹（如
<label><input type="checkbox" hidden></label>），样式要挂到 label 上，再用input:indeterminate + label或兄弟选择器联动
别误用 :indeterminate 到单选框或进度条上
它确实支持 <input type="radio"> 和 <progress></progress>，但触发逻辑完全不同，混用会出错。
单选框的 :indeterminate 是“组内无任何 checked”，纯靠 HTML 初始化状态触发，JS 无法手动设置 radio.indeterminate = true；<progress></progress> 的 :indeterminate 只在没设 value 属性时生效，设了就立刻退出。
所以：
- 做树形全选/半选？只用在
checkbox，且必须 JS 控制 - 想提示“此处必填”？可以用 radio 组的初始
:indeterminate，但别指望运行时动态切换 - 进度条加载中？直接省略
value，:indeterminate自动生效，不用 JS 干预
真正难的不是写 CSS，而是同步维护 indeterminate 状态与父子节点选中逻辑——这个 JS 层容易漏掉边界情况，比如子项异步加载完成后的重算。
