:checked + label 不生效的根本原因是 html 结构不满足紧邻兄弟选择器要求：input 必须紧挨着 label 且在前，中间不能有空格、换行、注释或其它元素。
为什么 :checked + label 有时不生效
根本原因通常是 HTML 结构不满足「紧邻兄弟」要求：<input type="checkbox"> 必须在 DOM 中**紧挨着** <label></label>，且 input 在前、label 在后。如果中间有空格、换行、注释或其它元素（哪怕只是 <span></span>），选择器就失效。
常见错误写法：
<input type="checkbox" id="toggle"> <!-- 这里有个换行和注释 --> <label for="toggle">点击切换</label>
浏览器会把换行视为空白文本节点，破坏「相邻」关系。解决方法是让 input 和 label 在同一行，或用 Flex/Grid 布局但保持 DOM 顺序。
正确结构与基础样式控制
必须保证 input 是 label 的前一个兄弟元素，且不被其他节点隔开。此时 :checked + label 才能选中目标 label 并应用样式。
立即学习“前端免费学习笔记（深入）”；
-
input需设position: absolute; opacity: 0;隐藏但保留可交互性 -
label需设cursor: pointer;明确提示可点击 - 切换效果建议用
background-color、color或transform，避免触发重排
<input type="checkbox" id="switch">
<label for="switch">启用功能</label>
<p><style>
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
input[type="checkbox"]:checked + label {
background-color: #007bff;
color: white;
padding: 4px 12px;
border-radius: 4px;
}
</style>扩展：用 :checked + label + * 影响后续元素
如果想在勾选后不仅改 label 样式，还影响它后面的容器（比如显示隐藏内容），可以链式使用兄弟选择器。但注意：只能向后选，不能跨父级，也不能跳过元素。
例如，让勾选后显示下方的 <div class="detail">：<pre class="brush:php;toolbar:false;"><input type="checkbox" id="show-detail">
<label for="show-detail">查看详情</label>
<div class="detail">这里是详细内容</div>
<p><style>
.detail {
display: none;
}
input[type="checkbox"]:checked + label + .detail {
display: block;
}
</style></pre><p>关键点：<code>.detail 必须是 label 的**下一个紧邻兄弟元素**；若中间插了 <br> 或空文本节点，就会断链。
移动端点击区域小？别只靠 for 属性
for="id" 能让点击 label 触发 input 切换，但默认点击热区仅限文字区域。用户手指容易点不准。
- 给
label加display: inline-block;或display: block;扩展可点击范围 - 配合
padding和min-height提升触控友好性 - 避免对
label设置pointer-events: none;—— 这会让点击完全失效 - 如需自定义图标（如开关滑块），建议用
label::before/::after伪元素绘制，而非额外标签
真实项目中，DOM 顺序和节点纯净度比 CSS 技巧更重要。一旦发现样式不响应，先检查控制台 Elements 面板里 input 和 label 是否真正在同一层级、无间隔节点。这点比写十个过渡动画都关键。
