:checked + label 样式失效主因是HTML结构不满足相邻兄弟选择器要求：input与label必须同级紧邻、无空格换行注释，且input类型须为checkbox/radio并正确声明id；label不可包裹input；CSS需写全input:checked + label并检查优先级。
如果 :checked + label 样式没生效，大概率是 HTML 结构不满足相邻兄弟选择器的要求。
label 必须紧跟在 input 后面
相邻兄弟选择器（+）只匹配**紧挨着**的下一个同级元素。也就是说，input 和 label 必须是同一父容器下的连续兄弟节点，中间不能有其他元素（包括空格、换行、注释等）。
- ✅ 正确写法（无空格、无换行、顺序严格）：
- ❌ 常见错误（换行/空格/插入其他标签都会断开关系）：
<label for="agree">我已阅读并同意</label>
<!-- 或 -->
<input type="checkbox" id="agree"><span></span><label for="agree">...</label>
input 必须是 checkbox 或 radio
:checked 伪类仅对 <input type="checkbox">、<input type="radio"> 以及 <option> 有效。普通 text、button 等类型无法触发。
- 确保
type属性明确写出且拼写正确（如type="checkbox"，不是type="check"） - 不要遗漏
id（虽然样式不依赖它，但关联 label 需要）
label 不能包裹 input
如果把 input 写在 label 里面，那它们就不是兄弟关系，而是父子关系，+ 选择器完全失效。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误结构（label 包含 input）：
- ✅ 正确结构（input 和 label 并列）：
检查 CSS 优先级和拼写
即使结构正确，也可能被其他样式覆盖或存在低级错误：
