直接写 input:indeterminate 无样式反应，因原生复选框半选状态由系统控件绘制，需先设 appearance: none 才能用伪元素重绘；indeterminate 属性必须通过 js property 赋值（elem.indeterminate = true），html 属性无效；框架封装后需匹配其选择器优先级；树形组件中父子半选逻辑须手动计算与同步。
为什么直接写 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）。
- 该操作不触发
change事件，也不影响checked值，两者正交独立 - 用户点击该复选框时，
indeterminate自动变为false，checked按常规逻辑翻转 -
indeterminate = true时，checked仍可为true或false，但视觉上勾选图标会消失
让半选视觉真正可控的最小四步链
缺一不可，否则样式只是摆设：
- 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 无效；设了 appearance: none 后，accent-color 就彻底失效了，必须靠伪元素控制颜色和形状。
树形组件中父子联动必须手动计算
“部分子项选中 → 父节点半选”是纯业务逻辑，浏览器不会自动推导。每次子项变更后，必须手动判断：someChecked && !allChecked → 设 parent.indeterminate = true，并同步更新 aria-checked="mixed"。
点击父节点时，indeterminate 会自动变为 false，但此时你要立刻决定：是全选子项、还是全不选、还是清空后重新计算——别忘了在批量更新子项时避免触发子项的 change 回调循环。
最易忽略的是：:indeterminate 不触发任何事件，无法监听；想响应状态变化，只能靠 click + 显式检查 indeterminate 值，或在每次子项变更后统一重算父项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
