:indeterminate 伪类需通过 javascript 设置 indeterminate = true 才生效，html 属性无效；其不改变 checked 值，仅影响视觉与样式匹配；父复选框响应子项需手动计算勾选数并显式设置 checked 和 indeterminate。
为什么 :indeterminate 不能直接用 HTML <input type="checkbox"> 触发
浏览器原生不支持通过 HTML 属性（比如 indeterminate="true"）设置复选框为半选状态。这个状态必须由 JavaScript 手动设置 indeterminate 属性，且该属性是只读的 DOM 属性——它不会影响 checked，也不反映在 HTML 源码里。
常见误解是给元素加 class 或写 input:indeterminate { ... } 就能生效，结果样式没反应，是因为 DOM 上根本没进入 indeterminate 状态。
- 必须用 JS 设置：
checkbox.indeterminate = true - 设置后，
checked值保持不变（仍为true或false），但视觉上显示半选 -
:indeterminate伪类只匹配此时indeterminate === true的<input type="checkbox">
怎么让父级 checkbox 正确响应子项状态变化
典型的树形/层级复选框中，“全选”框需要根据子项状态自动切换：全勾 → checked=true；全不勾 → checked=false；部分勾 → indeterminate=true，且 checked 保持 false（或 true，但语义上建议设为 false）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 不要依赖
change事件直接读e.target.checked来反推父状态——子项变更时，父项的checked可能还没更新 - 每次子项变更后，显式计算已勾选数：
const checkedCount = [...children].filter(c => c.checked).length - 然后设置：
parent.checked = false; parent.indeterminate = checkedCount > 0 && checkedCount - 注意：设置
indeterminate后，click事件中e.target.checked仍是旧值，需在事件处理中重读或延迟更新
:indeterminate 样式兼容性与 fallback 处理
所有现代浏览器（Chrome 52+、Firefox 59+、Safari 15.4+、Edge 79+）都支持 :indeterminate 伪类，但默认样式差异大：Windows 下通常显示为实心方块或短横线，macOS 是中间带横杠的方框，部分 Linux 主题可能不渲染或渲染为灰色。
- 无法用
appearance: none+ 自定义背景完全覆盖原生半选图标（因为:indeterminate不触发::before/::after） - 稳妥做法是结合
appearance: none和自定义背景图/伪元素，并用input:indeterminate + label::before控制视觉状态 - 示例关键 CSS：
input[type="checkbox"] { appearance: none; }input[type="checkbox"]:indeterminate + label::before { background-image: url("data:image/svg+xml,%3Csvg..."); } - 若需支持旧版 Safari（.is-indeterminate）手动控制样式
容易被忽略的细节：focus 和键盘交互行为
当 indeterminate 为 true 时，空格键触发的行为因浏览器而异：Chrome 和 Edge 会先清除 indeterminate 状态并设为 checked=true；Firefox 则直接设为 checked=true（跳过 indeterminate）；Safari 行为类似 Chrome。
- 如果希望空格键在半选态下“切换到全选”，需拦截
keydown并手动控制：if (e.code === 'Space' && el.indeterminate) { el.indeterminate = false; el.checked = true; e.preventDefault(); } - Tab 进入半选框时，焦点样式仍按
:focus触发，但不会自动改变状态 —— 这点常被测试忽略 - 无障碍方面，
aria-checked="mixed"必须同步设置，否则屏幕阅读器无法识别半选语义
真正麻烦的不是怎么画那个横杠，而是状态同步时机、键盘逻辑和辅助技术适配——这三处出错，用户要么点不动，要么读不出，要么以为勾了其实没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
