直接写 input:indeterminate 样式无效，因原生复选框半选状态由系统控件绘制，需先设 appearance: none 才能通过伪元素重绘；indeterminate 属性必须用 js 赋值 property（elem.indeterminate = true），html 属性无效；且需同步设置 aria-checked="mixed" 保障无障碍；树形组件中父子联动需手动计算并重置 indeterminate 状态。
为什么直接写 input:indeterminate 样式没反应
不是选择器写错了，而是你在跟操作系统渲染层硬刚：原生 <input type="checkbox"> 的半选图形（横杠或填充块）由浏览器私有控件绘制，background-color、border、color 这些属性对它完全无效。写了 input:indeterminate { background: red; } 却没加 appearance: none，这行 CSS 实际上没作用在可见区域上。
另外，框架（如 Element Plus、Ant Design）封装了 DOM 结构，:indeterminate 只匹配原生 input 元素，外层容器不会自动响应；如果框架用了 .el-checkbox input 这类高优先级选择器，而你只写 input:indeterminate，样式就会被覆盖。
indeterminate 属性必须用 JS 设置，HTML 写无效
indeterminate="true" 写在 HTML 里完全没用——浏览器会忽略它，也不会触发伪类匹配。正确做法是赋值 DOM property：
-
checkbox.indeterminate = true（注意是 property 赋值，不是setAttribute） - 此时
checkbox.checked仍为false或true，和indeterminate独立存在 - 用户点击该复选框时，
indeterminate自动变为false，checked按常规逻辑翻转 - “部分子项选中 → 父节点半选”是纯业务逻辑，必须手动计算并赋值，浏览器不会自动推导
让半选视觉真正可控的最小四步链
缺一不可，否则样式只是摆设：
- JS 控制状态：
elem.indeterminate = true - CSS 清除默认：
input[type="checkbox"] { appearance: none; } - 伪元素重绘：
input:indeterminate::before { content: ""; display: block; width: 8px; height: 2px; background: #333; margin: 7px auto 0; } - 同步无障碍语义：
elem.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”
注意：accent-color 在 Chrome/Safari 中对 :indeterminate 有效，但 Firefox 不支持；设了 appearance: none 后，accent-color 就失效了，必须靠伪元素。
树形组件中父子联动容易踩的坑
每次子项变更后，必须手动判断：someChecked && !allChecked → 设 parent.indeterminate = true；别忘了同步更新 aria-checked="mixed"。
点击父节点时，indeterminate 会**自动变为 false**，你要立刻重算子项状态并设置 checked 值——不能依赖 change 事件监听 indeterminate 变化（它不触发该事件）。
最易被忽略的是：indeterminate 是瞬态控制标记，不是持久状态。组件重渲染、数据刷新后，必须重新执行 el.indeterminate = xxx，否则样式和语义都会丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
