:checked可匹配初始HTML中带checked属性的复选框；需隐藏原生控件并用伪元素自定义样式，accent-color最稳妥；label必须正确绑定input才能触发状态与样式响应。
怎么用 :checked 伪类匹配初始选中的复选框
浏览器只在 DOM 加载后才解析 :checked，所以 HTML 中带 checked 属性的复选框，能立刻被 :checked 选中——但前提是它真在初始 HTML 里，而不是 JS 动态插入后才加的 checked 属性。
- 必须写
<input type="checkbox" checked>，不能只靠 JS 设置element.checked = true，后者不会触发:checked匹配 -
checked是布尔属性，写checked="false"没用，只要存在就生效 - 服务端渲染或静态 HTML 中确保属性存在；如果是 React/Vue，得确认框架没剥离该属性（比如 Vue 的
v-model不会自动写入checked属性）
为什么直接改 background 或 border 不生效
原生复选框的样式受系统控件限制，background、border、width 等对 <input type="checkbox"> 本身基本无效——浏览器会忽略，或只在部分 Chromium 版本中半生效。
- 真正可靠的做法是隐藏原生控件（
appearance: none或opacity: 0），再用::before/::after在其兄弟标签（如label）上画自定义样式 - 如果硬要改原生框，
accent-color是目前最稳妥的：支持 Chrome 93+、Firefox 96+、Safari 15.4+，能统一改变勾选色和未选色 - 别依赖
outline做焦点样式，它和:checked无关，且容易被用户代理样式覆盖
如何让 label 和 checkbox 联动并保持 :checked 样式响应
只有 label 正确绑定到复选框，点击 label 才能触发状态切换，进而让 :checked 生效。否则样式“看起来”不动，其实是根本没切状态。
- 用
for属性绑定：<input id="agree"><label for="agree">我同意</label> - 或嵌套写法更可靠：
<label><input type="checkbox"> 我同意</label>（此时无需id） - 如果用了自定义伪元素，记得把
pointer-events: none加在伪元素上，避免遮挡点击穿透 - 不要给
input设display: none，这会导致屏幕阅读器失效；改用position: absolute; left: -9999px或clip-path: inset(100%)
兼容性与移动端的坑
:checked 本身兼容性极好（IE9+），但配套的样式控制在旧版 Safari 和 Android Webview 里容易翻车。
立即学习“前端免费学习笔记（深入）”；
-
appearance: none在 Safari 需加-webkit-appearance: none，且 iOS 15.4 之前不支持accent-color - Android 4.4–6.0 的 WebView 对
::before在label上的支持不稳定，建议 fallback 到 JS 监听change事件手动切 class - 别在
:checked规则里写太重的动画（比如transform: scale()+box-shadow），低端安卓机可能卡顿或闪烁
