根本原因是HTML结构破坏了紧邻兄弟关系，input与label在DOM中不能有换行、空格或注释等节点；隐藏控件禁用display:none，应改用position:absolute+opacity:0；:checked仅对checkbox/radio生效，且无法控制非兄弟元素。
为什么 :checked + label 总是不生效
根本原因几乎总是 HTML 结构破坏了「紧邻兄弟」关系。:checked + label 要求 <input> 元素在 DOM 中**紧挨着** <label>，中间不能有换行、空格、注释或任何其他节点。浏览器会把换行符解析为文本节点，导致选择器完全失效。
常见错误写法：
<input type="checkbox" id="agree"> <!-- 用户协议 --> <label for="agree">我已阅读并同意</label>
正确写法必须压成一行，或用无空白的模板语法：
<input type="checkbox" id="agree"><label for="agree">我已阅读并同意</label>
- 若结构受限（如 Vue/React 渲染），改用
:checked ~ label更健壮，但需确保label和input在同一父级且位于其后 -
~不要求紧邻，但无法跨父容器；+更精确但更脆弱 - DevTools 里检查 Elements 面板，确认 input 和 label 是否真正在 DOM 树中连续排列（无文本节点夹在中间）
隐藏原生复选框时为什么不能用 display: none
display: none 会让部分屏幕阅读器忽略该控件，也导致 iOS Safari 等环境下点击 label 无法触发状态切换——这不是样式问题，是可访问性断裂。
立即学习“前端免费学习笔记（深入）”；
推荐隐藏方式（兼顾语义、交互与兼容）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
input[type="checkbox"], input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}-
opacity: 0保留点击区域，position: absolute移出布局流避免占位干扰 - 不要加
pointer-events: none，除非你确认label已通过for或包裹方式正确绑定 - 禁用
appearance: none单独使用：它在 Safari 旧版中可能残留默认边框，需配合border: 0和background: transparent
input:checked 和 input[type="checkbox"]:checked 有什么区别
前者会同时匹配 checkbox 和 radio，后者只作用于复选框。没加类型约束容易意外命中单选按钮，尤其当页面混用两类控件时。
典型误操作：
- 写了
.my-checkbox:checked却只给元素加 class →:checked只认真实选中状态，不认 class - 用
input:checked控制单选组样式，结果复选框也被一起改了 - 动态插入的复选框（如 JS
appendChild），只要用户点过一次，:checked就能响应；但 JS 直接设elem.checked = true也会立即触发 CSS 更新
推荐始终显式限定类型：input[type="checkbox"]:checked 或 input[type="radio"]:checked。
想控制非兄弟元素？CSS 没办法，别硬扛
:checked 只能配合 +（相邻兄弟）或 ~（通用兄弟）向后选同级后续元素，不能跨父级、不能向上选父、不能向下选子——:checked > .icon 永远无效。
常见失败尝试：
- 写
.wrapper:checked→.wrapper不是表单控件，:checked不适用 - 试图用
:checked直接改label文字颜色，但label是input的父元素或隔代祖先 → CSS 无解 - 目标元素不在同一父容器内（比如
input在form里，.hint在aside里）→ 必须靠 JS 或重构 DOM
真正可控的边界就一条：input 和目标元素必须在同一父容器内，且目标元素在 input 之后的 DOM 顺序中。
