input:indeterminate样式不生效是因为未设indeterminate=true、未用appearance:none清除默认样式、未用伪元素重绘且未同步aria-checked。
直接写 input:indeterminate 样式大概率没反应——不是选择器错了，而是你还没让复选框真正进入 indeterminate 状态，也没接管它的渲染层。
为什么 input:indeterminate 样式不生效
浏览器对原生 <input type="checkbox"> 的半选图形（比如横杠）是硬编码绘制的，background-color、border、color 这些常规属性根本改不到它。写了 input:indeterminate { background: red; } 却看不到效果，90% 是因为没加 appearance: none。
- 原生控件的“半选”由 UA 样式控制，CSS 无法穿透修改，除非先移除默认外观
- 框架（如 Ant Design、Element Plus）常把真实
input套在label或span里，input:indeterminate选择器可能被更高优先级规则覆盖（比如.ant-checkbox-input:indeterminate） - Safari 在 iOS 15.4 之前对
::before/::after在:indeterminate下的支持极不稳定，别依赖伪元素定位
必须用 JS 设置 indeterminate = true，HTML 属性无效
indeterminate="true" 写在 HTML 里完全被忽略——这不是标准 HTML 属性，浏览器不会解析它，也不会触发 :indeterminate 匹配。只有 JS 赋值才有效：
const cb = document.querySelector('#my-checkbox');
cb.indeterminate = true; // ✅ 正确：设置 DOM property
// cb.setAttribute('indeterminate', 'true'); ❌ 无效：只是设了无关 attribute
-
indeterminate和checked是正交的：可以同时indeterminate = true且checked = false，此时勾选图标消失，显示半选视觉 - 用户点击该复选框时，
indeterminate会**自动变为false**，checked按常规逻辑翻转（即从false变true），你要立刻同步子项状态 - 它不触发
change事件，所以监听change无法捕获 indeterminate 状态变化
最小可行样式链：四步缺一不可
要让半选视觉真正可控，必须串起这四个环节：
立即学习“前端免费学习笔记（深入）”；
-
JS 控制状态：
checkbox.indeterminate = true（注意是 property，不是setAttribute） -
CSS 清除默认：
input[type="checkbox"] { appearance: none; -webkit-appearance: none; } -
伪元素重绘：
input:indeterminate::before { content: ""; display: block; width: 8px; height: 2px; background: #333; margin: 7px auto 0; } -
无障碍语义：
checkbox.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”
accent-color 在 Chrome/Safari 中对 :indeterminate 有效（input:indeterminate { accent-color: orange; }），但 Firefox 不支持；一旦用了 appearance: none，accent-color 就失效，必须靠伪元素。
父子联动时最易漏掉的业务逻辑
“子项部分选中 → 父项半选”不是浏览器自动推导的，必须手动计算并显式设置：
- 每次子 checkbox 的
change事件后，统计：someChecked && !allChecked → parent.indeterminate = true，同时保持parent.checked = false - 父 checkbox 被点击时，先判断当前是否为
indeterminate：若是，应设为全选（checked = true+ 同步所有子项）；若否，按常规切换 - 别忘了禁用状态组合：
input:indeterminate:disabled需单独定义，灰色横线+低透明度文本才算合规
真正麻烦的从来不是写几行 CSS，而是每次子项变更后都得重新算一遍 indeterminate，并确保 aria 属性、视觉、数据三者严格同步——这个逻辑一旦漏掉，半选就只剩个空壳。
