input:indeterminate样式无效，是因为原生复选框半选图形由系统/浏览器私有渲染，必须先设appearance: none清除默认外观，再用伪元素重绘；且indeterminate只能通过js设置elem.indeterminate = true，html属性无效，还需同步aria-checked="mixed"保障无障碍。
为什么写了 input:indeterminate 样式却没反应
不是选择器写错了，而是你在跟浏览器原生渲染层硬刚：原生 <input type="checkbox"> 的半选图形（横杠或方块）由操作系统或浏览器私有逻辑绘制，background-color、border、color 这些属性对它完全无效。写了 input:indeterminate { background: red; } 却没加 appearance: none，这行 CSS 实际上没作用在可见区域上。
另外要注意：
- 框架（如 Ant Design、Element Plus）封装后的 checkbox 是自定义 DOM 结构，
:indeterminate只匹配原生<input>元素，外层容器不会响应 - 选择器优先级不够：比如框架用了
.el-checkbox input，而你只写input:indeterminate，样式就被覆盖了 -
indeterminate="true"写在 HTML 里完全无效——浏览器会忽略它，也不会触发伪类匹配
必须走通的四步最小可行链
缺一不可，否则样式只是摆设：
- 用 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')，否则屏幕阅读器读不出“半选”
:indeterminate 和 :checked 能不能共存？
不能同时为真——:indeterminate 和 :checked 是互斥状态。当 elem.indeterminate = true 时，elem.checked 仍为 false（或 true），两者独立。用户点击该控件后，indeterminate 自动变为 false，checked 按常规逻辑翻转。
CSS 中可分别定义：
-
input:checked::before绘勾 -
input:indeterminate::before绘横线 - 但不要写成
input:checked:indeterminate（语法无效）
父子联动时，indeterminate 状态必须手动计算
浏览器不会根据子项 checked 状态自动设父项 indeterminate。必须手写逻辑判断并显式设置：
- 监听所有子
<input type="checkbox">的change事件 - 统计
checked数量和总数，若0 → 设 <code>parent.indeterminate = true，同时设parent.checked = false - 父 checkbox 被点击时，要区分当前状态：若
indeterminate === true，则设为全选；否则按常规 toggle
容易被忽略的是：不同浏览器对 ::before/::after 在 checkbox 上的渲染支持不一致，Chrome 和 Safari 表现较稳定，Firefox 有时需额外加 position: relative 或调整 margin 值才能居中；另外，accent-color 虽能快速切换色调，但它只影响原生控件（即未设 appearance: none 时），设了之后就失效了——这点常被误当作“样式没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
