:indeterminate伪类仅在JS显式设置indeterminate=true时匹配，不响应UI半选状态；此时checked不变、点击无效，且浏览器从不自动设置该状态。
伪类 :indeterminate 实际上不匹配“半选框”状态
直接说结论：:indeterminate 伪类**不会响应 checkbox 的视觉“半选”状态（即中间横线）**，它只在 DOM 层面被 JavaScript 显式设置 indeterminate = true 时才生效——此时 checkbox 的勾选状态（checked）仍为 false，且用户无法通过点击改变该状态，纯属“不可控中间态”。
常见误解是以为勾选父级 checkbox 后子项部分选中 → 浏览器自动设为 :indeterminate → CSS 就能样式化。但事实是：浏览器**从不自动设置 indeterminate**；这个状态必须由 JS 主动写入，CSS 才能捕获。
如何让 :indeterminate 真正生效并样式化
关键动作只有一步：用 JavaScript 手动设置元素的 indeterminate 属性为 true，之后 :indeterminate 才会匹配。
-
indeterminate是一个 DOM 属性（非 HTML attribute），不能通过<input indeterminate>声明，只能用 JS 设置 - 设置后，
checked值不变（仍是false或true），但 UI 会强制显示为横线（无勾、无空），且点击无效 - CSS 中可直接写
input:indeterminate { ... }，但需注意：部分旧版 Safari 对该伪类支持不稳定（iOS ≤ 15.4 有渲染延迟） - 若要覆盖默认横线样式（如改成圆点、文字提示等），必须配合
appearance: none+ 自定义背景图或伪元素
// 示例：JS 主动触发 indeterminate
const cb = document.querySelector('#my-checkbox');
cb.indeterminate = true; // ✅ 此时 :indeterminate 才匹配
cb.checked = false; // ⚠️ checked 仍可为 false/true，不影响 indeterminate 状态
为什么你看到的“半选框”大概率不是 :indeterminate
绝大多数 UI 框架（Ant Design、Element Plus、Bootstrap Vue）里“父 checkbox 半选”效果，都是**纯 CSS 模拟**：隐藏原生 checkbox，用 ::before/::after 绘制横线，并监听 JS 状态切换 class（如 .is-indeterminate）。它们和原生 :indeterminate 无关。
立即学习“前端免费学习笔记（深入）”；
- 原生
:indeterminate不触发change事件，也无法用tab键聚焦后空格切换（它被设计为“只读中间态”） - 如果你需要可交互的“部分选中”反馈（比如点击后变为全选/全不选），就别依赖
:indeterminate，改用 class 控制更可控 - 检查是否真用了原生逻辑：右键审查元素 → 查看
indeterminate属性是否为true（DevTools 中会显示为indeterminate=""）
兼容性与实际建议
:indeterminate 在 Chrome/Firefox/Edge（≥79）中表现一致，但 Safari 仍存在两个坑：
- iOS Safari 15.4 及更早版本：设置
indeterminate = true后，UI 可能延迟 1 帧才更新，导致 CSS 动画错位 - macOS Safari 16+：若 checkbox 父容器有
transform或filter，横线可能渲染偏移或消失 - 真正需要无障碍支持时，仅靠
:indeterminate不够 —— 必须同步设置aria-checked="mixed" - 如果项目需支持 IE 或低版本移动端，直接放弃原生方案，统一用 class + SVG 图标模拟
复杂点在于：它既不是状态驱动，也不是事件驱动，而是一个“单向写入标记”。一旦设了 indeterminate = true，你就得自己管理后续逻辑，浏览器不会帮你回退或联动。
