要匹配真正的indeterminate状态，必须用javascript显式设置elem.indeterminate = true，html中indeterminate属性无效；需配合appearance: none、伪元素重绘及aria-checked="mixed"才能实现视觉与无障碍支持。
怎么写才能匹配到真正的 indeterminate 状态
:indeterminate 伪类只匹配那些被 JavaScript 显式设置过 indeterminate = true 的原生 <input type="checkbox"> 元素。HTML 中写 indeterminate 属性（比如 <input indeterminate>）完全无效，浏览器会忽略它，也不会触发该伪类。
- 浏览器不会根据子项选中数量自动推导父项是否为
:indeterminate - 单靠 CSS 无法“触发”或“维持”这个状态，必须由 JS 控制
-
indeterminate和checked是正交属性：一个复选框可以同时是indeterminate = true且checked = false（这是半选的合法组合）
为什么写了 input:indeterminate { background: red; } 却没反应
这不是选择器写错了，而是你在对操作系统渲染层直接“下指令”——原生复选框的半选图形（横杠、方块）由浏览器 UA 样式私有绘制，background、border、color 这些常规属性根本作用不到那个小图标上。
- 没加
appearance: none就写样式 → 实际没改到可见区域 - 框架封装的 checkbox（如
<el-checkbox></el-checkbox>或<ant-checkbox></ant-checkbox>）内部是自定义 DOM，:indeterminate只能作用在它包裹的原生input上，外层容器不响应 - 选择器优先级不够：比如框架用了
.el-checkbox input，而你只写input:indeterminate，样式就被覆盖了
怎么让 :indeterminate 样式真正生效（最小可行链）
必须四步全走通，缺一不可：
- 用 JS 设置状态：
elem.indeterminate = true（注意不是setAttribute('indeterminate', 'true')） - CSS 清除默认外观：
input[type="checkbox"] { appearance: none; -webkit-appearance: none; } - 用伪元素重绘半选图形：
input:indeterminate::before { content: ""; display: block; width: 8px; height: 2px; background: #333; margin: 7px auto 0; } - 同步无障碍语义：
elem.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”
不同浏览器下要注意的细节
Chrome 和 Safari 对 ::before 在 checkbox 上的渲染较稳定；Firefox 有时需要额外加 position: relative 或微调 margin 才能让横线居中。accent-color 完全不影响 :indeterminate 态——它只控制 :checked 下的勾选色，设了 appearance: none 后它就彻底失效了。这点常被误当作“样式没生效”。
最常被跳过的环节是：父子联动时，每次子项变更后必须手动判断并显式设置 indeterminate，而不是指望 CSS 自动识别“部分选中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
