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