:indeterminate伪类仅匹配js设置indeterminate=true的原生复选框，需配合appearance:none及伪元素重绘才能生效，否则样式无效。
直接说结论：:indeterminate 伪类本身不“触发”半选，只匹配 JS 设置了 indeterminate = true 的复选框；想让它样式生效，必须加 appearance: none，再用 ::before 或 ::after 重绘，否则你写的 CSS 基本等于没写。
为什么 :indeterminate 样式总不生效
不是选择器写错了，而是你还在跟浏览器原生控件“硬刚”：
- 原生
<input type="checkbox">的半选图形（横杠/方块）由操作系统或浏览器私有渲染逻辑控制，background-color、border、color这些对它完全无效 - 没加
appearance: none就写input:indeterminate { background: red; }—— 这行代码根本没作用在可见区域上 - 框架或 UI 库（比如 Layui、Element）的 checkbox 是封装后的 DOM 结构，
:indeterminate只作用于原生input元素，外层容器不会自动响应 - 选择器优先级不够：比如框架写了
.el-checkbox input，而你只写input:indeterminate，样式就被覆盖了
怎么让半选视觉真正可控（最小可行链）
必须走通这四步，缺一不可：
- 用 JS 设置
elem.indeterminate = true（注意：不能用setAttribute('indeterminate', 'true')，那是 attribute，不是 property） - 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 对 :indeterminate 有效吗
只在 Chrome / Safari 里部分有效，Firefox 完全无视：
-
input:indeterminate { accent-color: orange; }在 Chrome/Safari 下能改掉半选时的填充色（比如横杠颜色），但不是所有浏览器都支持该组合 - Firefox 渲染半选为实心块，
accent-color不起作用，必须靠::before自定义 - 别指望
accent-color统一控制——它本质是为:checked设计的，对:indeterminate属于“附带支持”，不能当主方案
树形组件中父子联动最容易漏的三件事
浏览器不会自动算“几个子项选中了所以父节点半选”，全是手动活：
- 每次子项 change 后，必须显式判断：
parent.indeterminate = (checkedCount > 0 && checkedCount ，然后立刻赋值 - 用户点击父 checkbox 时，
indeterminate会**自动变回false**，此时你要立刻根据新checked值向下同步子项，而不是等 change 事件再处理 - 别在
change回调里调click()或再次触发select，容易无限递归——尤其用 Vue/React 的双向绑定时，状态和 DOM 更新节奏稍不一致就崩
最常被跳过的其实是状态持久化：DOM 上的 indeterminate = true 是瞬态标记，刷新页面就丢。业务逻辑里得单独维护一份“半选标识”，否则数据和 UI 对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
