:checked伪类是控制复选框选中状态样式的核心手段，需隐藏原生checkbox并借助label等兄弟元素实现自定义外观，配合+或~选择器触发视觉变化。
复选框（）默认样式在不同浏览器中差异大，且难以直接美化。CSS 的 :checked 伪类是控制其“选中状态”样式的最核心手段——但它**不能直接作用于 元素本身进行复杂样式绘制**（因原生 checkbox 是替换元素，部分样式属性无效），必须配合 HTML 结构调整和 CSS 技巧才能实现自定义外观。
1. 基础原理：隐藏原生 checkbox，用其他元素模拟视觉效果
由于浏览器对 的可样式化能力极弱（如 background、border-radius 多数无效），常规做法是：
- 将原生 checkbox 设置为
opacity: 0或position: absolute; left: -9999px等方式“视觉隐藏”，但保持其可交互和表单功能 - 利用相邻兄弟选择器（
+）或通用兄弟选择器（~），在它后面的标签（）上定义正常样式和选中态样式 - 通过
input:checked + label匹配到被选中的 checkbox 对应的 label，并改变其外观（如添加勾选图标、背景色等）
2. 实现一个带圆点图标的自定义复选框
HTML 结构示例：
CSS 样式示例：
立即学习“前端免费学习笔记（深入）”；
#agree {
display: none; /* 彻底隐藏原生控件 */
}
agree + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
agree + label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
}
agree:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
}
agree:checked + label::after {
content: '✓';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 12px;
}
说明：用 ::before 绘制外圈圆，::after 在选中时显示对勾；:checked + label 确保仅当 checkbox 被勾选时才触发样式变化。
3. 使用 :checked 配合 sibling 元素控制其他内容显隐
:checked 还常用于“开关式交互”，比如点击 checkbox 显示/隐藏一段说明文字：
这里是需要按需展开的补充内容…
#show-info {
display: none;
}
.detail {
display: none;
margin-top: 8px;
padding: 10px;
background: #f5f5f5;
}
show-info:checked ~ .detail {
display: block;
}
注意这里用了 ~（通用兄弟选择器），因为 .detail 不是 label 的紧邻兄弟，而是同级后续元素。
4. 注意事项与兼容性
:checked 伪类在所有现代浏览器中支持良好（IE9+），但要注意：
- 只对
和生效，对或普通元素无效 - 无法通过 JS 直接设置
:checked的样式（它是只读状态伪类），但可通过 JS 修改元素的checked属性，从而触发样式更新 - 若 checkbox 是 disabled 状态，
:checked仍会匹配，但用户无法操作；如需区分，可叠加:disabled:checked
不复杂但容易忽略：真正起作用的是结构关系 + 伪类联动，而不是给 input 本身加样式。
