input:indeterminate样式生效需四步：JS设indeterminate=true、appearance:none清除默认、伪元素重绘、aria-checked="mixed"同步语义；否则视觉与无障碍均失效。
:indeterminate 伪类本身不优化 UI，它只匹配 JS 设置了 indeterminate = true 的原生复选框；没清默认样式、没重绘、没同步语义，就等于白写。
为什么 input:indeterminate 样式总不生效
不是选择器写错，而是你还在试图修改原生控件的“内部图形”——操作系统或浏览器私有渲染层根本不响应 background-color、border 或 color 这类声明。
- 写了
input:indeterminate { background: red; }却没加appearance: none→ 这行 CSS 没作用在可见区域上 - 用的是 Ant Design / Element 等封装组件 →
:indeterminate只匹配原生，外层容器不会响应 - 选择器优先级不够：框架用了
.el-checkbox input，而你只写input:indeterminate→ 被覆盖 - 误以为
indeterminate="true"写在 HTML 里就能触发 → 浏览器直接忽略，标准里压根没有这个 HTML 属性
必须走通的四步最小链
缺一不可，否则半选只是逻辑存在、视觉消失：
- JS 控制状态：
checkbox.indeterminate = true（注意是 property 赋值，不是setAttribute('indeterminate', 'true')） - CSS 清除默认：
input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } - 伪元素重绘：
input:indeterminate::before { content: ""; display: block; width: 8px; height: 2px; background: #333; margin: 7px auto 0; } - 同步无障碍语义：
checkbox.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”
父子联动时最容易漏掉的细节
浏览器不会自动根据子项 checked 状态推导父项 indeterminate —— 这是纯业务逻辑，必须手动判断和设置。
- 每次子项
change后，要统计：someChecked && !allChecked→ 才设parent.indeterminate = true - 父项被点击时，
indeterminate会**自动变为false**，但checked仍按常规翻转（false → true），你要立刻同步子项状态 - 别监听
change来响应indeterminate变化 —— 它不触发该事件；改用click+ 显式判断 - Firefox 对
::before在 checkbox 上的居中支持不稳定，建议加position: relative和微调margin
真正麻烦的从来不是画一根横线，而是每次子项变更后都要重新计算、赋值、同步语义、防事件循环 —— 这些逻辑一旦漏掉一环，UI 就会“看起来正常，实际不可用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
