:indeterminate伪类需js设置indeterminate=true、css清除appearance、伪元素重绘图形、同步aria-checked语义四步协同才生效，缺一不可。
:indeterminate 本身**不能设置**半选状态，只能匹配已由 JavaScript 设置了 indeterminate = true 的原生 <input type="checkbox"> 元素。想让半选视觉生效，必须走 JS + CSS 协同链，缺一不可。
为什么直接写 input:indeterminate { background: red; } 没反应
因为浏览器把半选图形（横杠或方块）画在系统控件层，不是 <input> 元素本身的盒模型里：background、border、color 对它完全无效。
- 没加
appearance: none→ 样式作用不到可见区域 - 框架封装了 DOM（如
<el-checkbox></el-checkbox>），你写的input:indeterminate选择器根本没命中真实<input> - 写了
indeterminate="true"在 HTML 里 → 浏览器直接忽略，不触发伪类匹配 - 选择器权重不够，被框架样式（如
.el-checkbox__inner input）覆盖
怎么让 :indeterminate 样式真正起效（最小可行链）
四步必须全做，少一步都白搭：
- 用 JS 设置属性：
checkbox.indeterminate = true（注意是 property 赋值，不是setAttribute） - 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')，否则屏幕阅读器读不出“半选”
父子联动时最常漏掉的两个细节
“父 checkbox 半选”不是浏览器自动算的，是业务逻辑推导结果，每次子项变更后必须手动判断并设置：
- 判断条件必须是：
someChecked && !allChecked→ 才设parent.indeterminate = true - 用户点击父 checkbox 时，
indeterminate会**自动变为 false**，但checked仍按常规翻转；你要在 click 事件里显式重置：parent.checked = !parent.checked; parent.indeterminate = false; - 别忘了：设
indeterminate = true时，checked应保持为false（即使之前是true），否则视觉可能跳变
跨端（uni-app / 小程序）为什么根本用不了 :indeterminate
因为底层不支持原生 indeterminate 属性：
- 微信小程序：
<checkbox></checkbox>是自定义组件，indeterminate不被 schema 解析，JS 也无法访问真实 DOM - uni-app App 端（nvue）：用的是 iOS/Android 原生控件映射，原生平台无半选 API
- H5 端虽支持，但 uni-app 编译器会剥离非标准 prop，
:indeterminate不会被透传到最终<input>
这种情况下，只能放弃原生方案，改用自定义 checkbox 图形 + 状态变量模拟半选视觉，再靠 aria-checked="mixed" 补语义——但要注意，这和真正的 :indeterminate 无关，只是 UI 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
