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