:checked 用于样式化已选中的复选框或单选按钮，:indeterminate 表示部分选中的中间状态；前者直接响应用户选择，后者需 javaScript 设置，常用于树形结构或批量操作的父级节点，两者结合可实现无需脚本的视觉反馈与交互增强，提升表单可用性与用户体验。
:checked 和 :indeterminate 是css中用于表单控件状态样式的两个伪类，它们能帮助开发者更直观地反馈用户操作，提升表单的可用性和视觉体验。这两个伪类主要作用于 input[type="checkbox"]、input[type="radio"] 等可选控件，通过样式变化反映其当前选择状态。
:checked —— 响应已选中状态
当复选框或单选按钮被用户选中时，:checked 伪类会生效。利用这一点，可以自定义选中后的外观，比如改变背景色、添加图标或切换内容显示。
- 常用于美化默认的 checkbox 或 radio 样式，隐藏原生控件并用 CSS 绘制自定义图形
- 配合 label 实现“无 javascript”交互效果，如展开/收起内容、开关灯模式等
- 示例：使用
input:checked + label改变标签颜色或图标
:indeterminate —— 表达“不确定”中间态
某些情况下，复选框既不算选中也不算未选中，而是处于“部分选中”状态，例如树形结构中子项部分勾选时父节点的状态。原生 html 不提供直接设置该状态的属性，但可通过 JavaScript 动态设置 indeterminate = true，再由 CSS 控制样式。
- 适用于多层级选择（如文件夹权限、商品批量操作）中的父级汇总项
- 可用短横线（—）或方形图标替代常规对勾，清晰表达“半选”含义
- 增强可访问性：结合 ARIA 属性说明当前为混合状态
实际应用技巧
将这两个伪类与结构选择器结合，能实现无需 js 的基础交互反馈：
立即学习“前端免费学习笔记（深入）”；
- 隐藏原始 input：
input { opacity: 0; position: absolute; }，在其后定位自定义样式层 - 用 :checked 显示“已激活”边框或背景，提升点击反馈
- 通过
label::after在 :checked 或 :indeterminate 下绘制不同符号（✓ / —） - 搭配 CSS 过渡动画让状态切换更平滑
基本上就这些。合理使用 :checked 和 :indeterminate 能显著优化表单的选择反馈逻辑，尤其在复杂界面中提升用户的认知效率。虽然 :indeterminate 需要脚本辅助设置状态，但它带来的语义清晰度值得引入。不复杂但容易忽略。