:checked 是状态选择器，不直接渲染样式，需通过隐藏原生控件并联动 label 或伪元素实现视觉效果；结构必须正确（id/for 关联或嵌套），否则点击无效。
CSS :checked 本身不渲染样式，它只是状态选择器；真正起作用的是用它联动兄弟元素（比如 label 或伪元素）来模拟外观——直接给 input[type="checkbox"] 或 input[type="radio"] 加样式是无效的。
为什么 input:checked 看不到效果？
浏览器对原生表单控件的样式控制极弱，input[type="checkbox"] 和 input[type="radio"] 默认无法用 CSS 设置宽高、背景色或边框圆角。直接写 input:checked { background: blue; } 不会生效——因为该元素本身不可见渲染区域，且被 UA 样式屏蔽。
- 必须配合
display: none隐藏原生控件 - 用相邻兄弟选择器（
+）或通用兄弟选择器（~）选中紧随其后的label或自定义容器 - 或者用伪元素（如
label::before）在 label 上绘制视觉层
用 label + input + label 结构实现可点击区域
关键前提是：input 必须有 id，label 用 for 关联，或把 input 套进 label 内部。否则点击 label 不会触发选中状态，:checked 就永远不匹配。
- 推荐结构：
<input type="checkbox" id="agree"><label for="agree">我同意</label> - 隐藏 input：
input[type="checkbox"] { display: none; } - 用
input:checked + label::before绘制勾选图标（例如content: "✓";或背景图） - 确保
label有足够点击热区（比如加padding），否则体验差
单选框组怎么保证互斥且样式同步？
单选框（input[type="radio"]）依赖 name 属性分组，但 :checked 只作用于当前选中的那个。如果想让“未选中项”恢复默认态，不需要额外 JS —— CSS 天然支持。
立即学习“前端免费学习笔记（深入）”；
- 同一组 radio 必须共享
name值，例如name="theme" - 样式规则要分别写：
input[value="dark"]:checked + label { color: #fff; background: #333; } - 不要用
input:checked + label通配，否则所有 label 都会响应任意一个 radio 的选中状态 - 注意：disabled 状态下
:checked依然匹配，但用户无法操作，需额外加:disabled过滤
移动端点击失效或延迟怎么办？
部分安卓 WebView 或旧版 iOS Safari 对 label 的点击事件响应不灵敏，尤其当伪元素覆盖了实际点击区域时。
- 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent - 避免只靠
label::after做点击靶区——它默认不参与事件捕获，应把交互区域设在 label 本体上 - 测试真机：有些机型要求
label内至少包含一个非空文本节点，纯伪元素可能不触发 - 极端情况可加
onclick="void(0)"强制激活 tap，但属于兜底手段，优先调结构
最常被忽略的一点：所有基于 :checked 的视觉反馈都依赖 DOM 结构顺序和关联性。一旦 input 和 label 被 Vue/React 动态重排、或用了 Fragment 导致兄弟关系断裂，样式就立即失效——这不是 CSS 问题，是结构没对齐。
