input:indeterminate 伪类仅匹配 js 显式设置 indeterminate = true 的原生 checkbox，需配合 appearance: none、伪元素绘制、aria-checked="mixed" 才能实现可控半选视觉与无障碍支持。
:indeterminate 伪类本身不产生半选状态，只匹配 JS 显式设置 indeterminate = true 的原生 <input type="checkbox">；不加 appearance: none 就写样式，基本等于白写。
为什么 input:indeterminate 样式总没反应
不是选择器写错了，而是你在跟操作系统渲染层硬刚：
- 原生
<input type="checkbox">的半选图形（横杠/方块）由系统或浏览器私有逻辑绘制，background-color、border、color对它完全无效 - 没加
appearance: none就写input:indeterminate { background: red; }——这行代码根本没作用在可见区域上 - 框架（如 Element、Ant Design）封装后的 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')，否则屏幕阅读器读不出“半选”
: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></label>包裹（如<label><input type="checkbox" hidden></label>），样式要挂到label上，再用input:indeterminate + label或兄弟选择器联动 - 别监听
change事件来响应indeterminate变化——它不触发该事件；要用click+ 状态重算
最常被忽略的点是：半选状态不是浏览器自动推导的，而是业务逻辑计算结果；indeterminate = true 后，aria-checked="mixed" 必须同步设置，否则可访问性直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
