:checked伪类可纯CSS判断复选框选中状态并样式控制，支持accent-color、兄弟选择器联动及label交互，现代浏览器兼容良好，JS动态设置也会实时更新样式。
直接用 :checked 伪类就能判断复选框是否被选中，并据此设置样式，无需 JavaScript。
基础用法：给已选中的复选框加样式
:checked 只作用于 （以及单选框、）处于选中状态时。它本身选择的是输入元素，所以样式写在它上面即可：
input[type="checkbox"]:checked {
accent-color: #4285f4;
}
现代浏览器支持 accent-color 快速修改复选框高亮色；老版本可配合自定义外观（如隐藏原生框 + 用 ::after 绘制图标）。
控制关联元素：用兄弟选择器影响其他内容
常见需求是“选中后显示说明文字”或“高亮对应标签”。利用 ~（通用兄弟）或 +（相邻兄弟）即可：
立即学习“前端免费学习笔记（深入）”；
-
选中后显示隐藏的提示文字（同级后续元素）：
input[type="checkbox"]:checked ~ .tip { display: block; } -
让紧挨着的 label 变色：
input[type="checkbox"]:checked + label { color: #1a73e8; font-weight: bold; }
注意：HTML 中 input 必须在目标元素之前，且在同一父容器内，选择器才生效。
结合 label 实现无 JS 的交互效果
把 label 包裹复选框，或用 for 属性绑定，点击 label 就能触发选中。再配合 :checked，可实现开关、折叠面板等效果：
这里是隐藏内容#toggle:checked ~ .panel { max-height: 200px; opacity: 1; } .panel { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; }
这样就实现了纯 CSS 的显隐切换，适合轻量交互场景。
注意事项与兼容性
:checked 在所有现代浏览器中均支持（包括 IE9+），但有几点要留心：
- 只对用户操作或
checked属性初始为true的元素生效，JS 动态设置checked = true后样式会立即更新； - 不能用于判断“未选中”，要用
:not(:checked)； - 若需兼容极旧环境（如 IE8），需回退到 JS 监听
change事件 + 切换 class 的方式。
不复杂但容易忽略。
