复选框勾选后内容不显示，主因是:checked与目标元素DOM位置不符；~仅选择同级后续兄弟，需确保input与目标同父且input在前；disabled、JS重置或内联样式会干扰状态响应。
复选框勾选后内容不显示？检查 :checked 和 ~ 的 DOM 位置关系
用 :checked 配合兄弟选择器 ~ 切换内容，最常见失败原因是目标元素不在复选框的**后续兄弟节点**中。CSS 里 ~ 只能选中**同级、在它之后**的元素，且必须是同一个父容器下的直接子元素。
实操建议：
- 确保
<input type="checkbox">和要控制的<div>（或其他容器）是同一父元素的子节点，且<input>在前、目标元素在后 - 不要把目标内容包在
<label>里——<label>会包裹复选框，导致目标脱离同级关系 - 如果结构必须嵌套（比如用
<label>包裹复选框和文字），改用+（相邻兄弟）或 JavaScript，~在这种结构下完全失效
为什么 input:checked ~ .content 有时只生效一次？
这通常不是 CSS 问题，而是 HTML 中复选框被设为 disabled 或初始状态被 JS 干预覆盖。CSS 的 :checked 是实时响应的，只要 DOM 属性变化，样式立即重算。
排查要点：
- 检查复选框是否有
disabled属性——禁用状态下:checked伪类不会触发 - 确认没有 JS 代码在页面加载后强行调用
element.checked = false重置状态 - 避免在
<input>上写内联style覆盖了 display 切换逻辑（比如style="display: none"会压过 CSS 规则）
:checked ~ .content 和 :checked + .content 怎么选？
关键区别在于目标元素是否紧邻复选框：+ 要求目标是**下一个直接兄弟**，~ 允许中间有其他兄弟元素。
示例对比：
<input type="checkbox" id="toggle"> <p>中间无关内容</p> <div class="content">我被 ~ 选中</div>
上面这段，input:checked ~ .content 有效；但 input:checked + .content 无效，因为中间隔了 <p>。
使用建议：
- 目标内容紧跟复选框？优先用
+，性能略好，意图更明确 - 需要跳过一两个装饰性元素（如图标、提示文字）？必须用
~ - 别混用：同时写
input:checked + .content, input:checked ~ .content没意义，~已包含+的情况
移动端点击无响应？留意点击区域和 label 绑定
纯 CSS 方案在移动端容易点不中，根本原因常是复选框本身尺寸为 0，又没通过 <label for="id"> 正确绑定。
必须做两件事：
- 给
<input>加id，并配一个带for属性的<label>，用户点 label 才能触发 checkbox 状态切换 - 避免对
<input>直接设width: 0; height: 0后不提供替代点击区——可以设opacity: 0或position: absolute; clip: rect(0 0 0 0)，再用 label 布局撑开可点区域
否则，用户实际点的是空白，状态不变，CSS 自然不生效。
真正卡住的地方往往不是选择器写法，而是 checkbox 根本没被点中——先确认状态变了没，再查样式。
