:checked + label 是核心选择器，因原生 checkbox/radio 无法自定义图形，须借相邻 label 承载样式；它精准捕获选中后立即影响兄弟 label 的时机，零 JS、保语义、天然支持键盘焦点与屏幕阅读器。
为什么 :checked + label 是核心选择器
因为原生 <input type="checkbox"> 和 <input type="radio"> 无法直接绘制自定义图形，必须借助紧邻的 <label> 元素承载视觉样式。而 :checked + label 能精准捕获“选中后立即影响下一个兄弟 label”的时机，无需 JS、不破坏语义、天然支持键盘 focus 和屏幕阅读器（只要 label 正确绑定 for 或包裹 input）。
label 文字颜色/间距/对齐怎么随状态联动
文字本身不属于伪元素，不能用 ::before 控制，但可以通过父级 label 的类名或状态选择器统一调整：
- 选中时文字加粗：
input:checked + label { font-weight: 600; } - 禁用时文字变灰：
input:disabled + label { color: #999; cursor: not-allowed; } - hover 时文字下划线：
input + label:hover { text-decoration: underline; } - 若 label 内含多级结构（如
<span class="desc"></span>），可单独控制：input:checked + label .desc { opacity: 0.8; }
常见错位：文字和自定义框没对齐怎么办
根本原因是 label 默认是 inline 元素，基线（baseline）对齐导致视觉偏移。最稳的解法是让 label 成为 flex 容器并居中：
.custom-control {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.custom-control input {
margin-right: 8px;
opacity: 0;
position: absolute;
}
.custom-control label::before {
content: '';
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 6px;
flex-shrink: 0;
}
关键点：align-items: center 垂直居中所有子项；flex-shrink: 0 防止伪元素被压缩；margin-right 统一控制图文间距。
立即学习“前端免费学习笔记（深入）”；
移动端点击区域太小，怎么安全放大又不撑开布局
不能只放大伪元素，否则点击热区仍局限在原始 input 尺寸。正确做法是扩大 label 的响应区域，同时保持视觉尺寸不变：
- 给 label 设置
padding: 6px 12px—— 点击区域变大，但文字和自定义框位置不变 - 配合
touch-action: manipulation减少 iOS 300ms 延迟 - 避免用
transform: scale()放大伪元素，它会触发重排且可能模糊 - 如果 label 已是 block 级，用
min-height: 36px保证最小可点高度（WCAG 推荐值）
真正容易被忽略的是：label 的 padding 必须和 input 的 position: absolute 或 opacity: 0 配合使用，否则 padding 会把 input 推离原位，导致 :checked + label 失效。
