:indeterminate伪类仅匹配js设置indeterminate=true的复选框，需配合appearance:none和伪元素重绘才能生效，否则样式无效；html中写indeterminate属性无效，且必须同步aria-checked="mixed"保障可访问性。
:indeterminate 伪类本身不改变状态，只匹配 JS 设置了 elem.indeterminate = true 的复选框；没加 appearance: none 就写样式，基本等于白写。
为什么 :indeterminate 样式总不生效
不是选择器写错，而是你还在跟原生渲染逻辑硬刚：
- 原生
<input type="checkbox">的半选图形（横杠/方块）由操作系统或浏览器私有控件绘制，background-color、border、color对它完全无效 - 写了
input:indeterminate { background: red; }却没加appearance: none→ 这行 CSS 没作用在可见区域上 - 框架（如 Element、Ant Design）封装了 DOM 结构，
:indeterminate只匹配原生input元素，外层容器不会响应 - 选择器优先级不够：比如框架用了
.el-checkbox input，而你只写input:indeterminate，样式被覆盖
必须用 JS 设置 indeterminate = true，HTML 属性无效
indeterminate="true" 写在 HTML 里完全没用 —— 浏览器会忽略它，也不会触发伪类匹配。
- 正确做法：
checkbox.indeterminate = true（注意是 property 赋值，不是setAttribute） - 设置后，
checkbox.checked仍为false（或true），和indeterminate独立存在 - 用户点击该复选框时，
indeterminate自动变为false，checked按常规逻辑翻转 - 不能靠“子项部分选中”自动触发：必须手动计算并赋值，例如树形结构中遍历子节点后决定是否设为
true
让半选视觉真正可控的最小可行链
四步缺一不可，否则样式只是摆设：
- 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')，否则屏幕阅读器读不出“半选”
容易被忽略的是：不同浏览器对 ::before / ::after 在 checkbox 上的渲染支持不一致，Chrome 和 Safari 表现较稳定，Firefox 有时需额外加 position: relative 或调整 margin 值才能居中；另外，accent-color 虽能快速切换色调，但它只影响原生控件（即未设 appearance: none 时），设了之后就失效了——这点常被误当作“样式没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
