input:indeterminate样式生效需四步：js设indeterminate=true、appearance:none清除默认外观、伪元素重绘图形、同步aria-checked="mixed"语义。
直接写 input:indeterminate 样式基本没用，除非你同时做了三件事：用 JS 设置 indeterminate = true、加 appearance: none、再用伪元素重绘图形。
为什么 input:indeterminate 样式不生效
不是选择器写错了，而是你在跟操作系统渲染层硬刚。原生复选框的半选图标（横杠或填充块）由浏览器私有控件绘制，background-color、border、color 这些对它完全无效。
- 只写
input:indeterminate { background: red; }却没加appearance: none→ 实际没作用在可见区域上 - 用了 UI 框架（如 Element Plus、Ant Design）→ 它们的
.el-checkbox input选择器优先级更高，你的input:indeterminate被覆盖 - 写了
indeterminate="true"在 HTML 里 → 浏览器直接忽略，这不是标准属性，JS 才能设indeterminateproperty
必须走通的四步链
缺一不可，否则视觉上根本看不到“半选”：
- 用 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; } - 同步无障碍语义：
checkbox.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”
父子联动时怎么避免状态错乱
浏览器不会自动根据子项勾选数推导父项 indeterminate 状态，必须手动判断并显式设置：
- 监听所有子
input[type="checkbox"]的change事件 - 每次触发后统计：
const checkedCount = [...children].filter(c => c.checked).length - 然后设置：
parent.checked = false; parent.indeterminate = checkedCount > 0 && checkedCount - 父项被点击时，
indeterminate会**自动变为false**，你要立刻重算子项状态，别依赖e.target.checked的旧值
最常被忽略的是：设置了 indeterminate = true 后，checked 值仍保持原样（通常是 false），而用户点击该复选框时，indeterminate 会瞬间清零——这个过渡过程必须靠 JS 主动接管，CSS 本身不参与状态流转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
