你是否曾遇到过这样的困惑：明明在CSS中编写了 input:indeterminate { background: red; }，但复选框的半选状态却始终没有生效？别着急，问题并非出在选择器上，而是因为你正在与操作系统的原生渲染层进行直接对抗。
先明确一个核心要点：:indeterminate 伪类本身并不会自动生成半选状态，它仅仅是匹配那些通过JavaScript显式设置了 indeterminate = true 的原生复选框。而且，如果不同时添加 appearance: none 来编写样式，基本等于徒劳无功。
为什么 input:indeterminate 样式总是没有反应
并非选择器写错了，而是你正在与操作系统的渲染层正面交锋：
- 原生复选框的半选图形（横杠或方块）是由系统或浏览器私有逻辑绘制的，
background-color、border、color对这些元素完全无效 - 没有添加
appearance: none就编写input:indeterminate { background: red; }——这行代码实际上根本没有作用于可见区域 - 框架（如Element、Ant Design）封装后的复选框是自定义DOM结构，
:indeterminate只作用于原生input元素，外层容器不会自动响应 - 选择器优先级不足：例如框架编写了
.el-checkbox input，而你只写了input:indeterminate，样式自然会被覆盖
如何让半选状态真正实现视觉可控（最小可行方案）
必须走通以下四步，缺一不可：
- 通过JavaScript设置
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 是互斥状态：
- 当
checkbox.indeterminate = true时，checkbox.checked仍为false（或true），两者相互独立 - 用户点击该控件后，
indeterminate会自动变为false，checked则按常规逻辑翻转 - 在CSS中可以分别定义：
input:checked::before绘制勾选，input:indeterminate::before绘制横线，但不要写成input:checked:indeterminate（该语法无效） - 在父子联动场景中，每次子项变更后必须手动判断：
someChecked && !allChecked→ 设置parent.indeterminate = true
不同浏览器下需要注意的细节
accent-color 在Chrome/Safari下对 :indeterminate 无效，不要指望它来改变半选颜色：
accent-color只影响:checked状态的勾选颜色，对:indeterminate完全不起作用- Firefox 不支持通过
accent-color控制:indeterminate，必须依赖::before或::after进行自定义 - 如果使用了自定义
包裹（如），样式需要挂载到label上，再通过input:indeterminate + label或兄弟选择器进行联动 - 不要监听
change事件来响应indeterminate的变化——它不会触发该事件；应使用click结合状态重新计算
最容易被忽略的一点是：半选状态并非浏览器自动推导出来的，而是业务逻辑计算的结果；在设置 indeterminate = true 后，必须同步设置 aria-checked="mixed"，否则可访问性将直接失效。
