:checked + label 不生效的根本原因是 DOM 顺序错误：input 必须在同级 label 之前，因 + 选择器只能向后匹配；正确结构为<input><label for="id">，或改用<label><input></label>配合:has()或后代选择器。
为什么 :checked + label 样式不生效
根本原因是 HTML 中 <input type="checkbox"> 和 <label> 的 DOM 顺序不符合兄弟选择器的流向限制：CSS 的 +（相邻兄弟）和 ~（通用兄弟）都只能**向后匹配**，即目标元素必须在触发元素的**后面且同级**。
常见错误写法是把 <label> 放在 <input> 前面，例如：
<label for="agree">我已阅读条款</label> <input type="checkbox" id="agree">
此时 input:checked + label 永远不会匹配——因为 label 在 input 前面，不是它的兄弟，更不是“后面”的兄弟。
必须确保 <input> 在 <label> 前面
正确结构要满足两个条件：同级、input 元素在前，label 紧跟其后（或之后任意位置，若用 ~）。
立即学习“前端免费学习笔记（深入）”；
- 用
+：要求label**紧邻**在input后面（中间不能有其他同级元素） - 用
~：允许label在input后面任意位置（中间可隔div、span等，只要同级） -
for和id仍需配对，否则点击 label 无法触发 checkbox 切换
正确示例（使用 +）：
<input type="checkbox" id="agree"> <label for="agree">我已阅读条款</label>
对应 CSS 才能生效：
input[type="checkbox"]:checked + label {
color: #4CAF50;
font-weight: bold;
}替代方案：用 <label> 包裹 <input>
如果无法调整 DOM 顺序（比如模板受框架约束），最稳妥的解法是把 input 直接嵌套进 label 内。此时无需兄弟选择器，改用后代选择器即可，且语义更清晰、点击区域更大。
结构示例：
<label> <input type="checkbox" name="agree"> 我已阅读条款 </label>
CSS 写法：
label input[type="checkbox"]:checked + span,
label input[type="checkbox"]:checked ~ span {
/* 不推荐：仍依赖顺序 */
}
/* 更直接：用 :has()（现代浏览器）或直接样式 label */
label input[type="checkbox"]:checked {
/* 可控制 input 自身，但无法直接改 label 文字样式 */
}
/* 推荐：给 label 加 class 或用 :has() */
label:has(input:checked) {
color: #4CAF50;
}注意：:has() 目前（2024）在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持，旧版需回退到 JS 或结构调整。
检查是否被其他样式覆盖或存在 specificity 冲突
即使顺序正确，也可能因以下原因失效：
- 其他 CSS 规则优先级更高（比如带
!important、内联样式、ID 选择器） - label 上有
style="color: red"这类内联样式，会盖过外部:checked + label - input 没有
id，或 label 的for值不匹配，导致用户点击无法触发:checked状态 - input 被设为
display: none但未用visibility: hidden或position: absolute; left: -9999px等可访问性友好的隐藏方式（部分屏幕阅读器或浏览器可能影响状态同步）
调试建议：打开 DevTools，勾选 checkbox，看元素上是否出现 :checked 状态；再手动在 Elements 面板中给 label 添加临时 class，确认样式能否生效——以此区分是状态没触发，还是样式没应用。
真正卡住的地方往往不在选择器写法本身，而在 DOM 顺序这个硬性前提没满足，或者以为“写了 for 就一定联动”，结果 id 对不上。
