纯HTML与CSS实现勾选复选框隐藏div功能失效问题咨询

问题原因 #

你使用的~是同级后续兄弟选择器，仅能匹配和当前元素属于同一个父节点、且出现在当前元素之后的元素。你代码里的.sort__checkbox被包裹在<label>标签内部，和外层的.sort div 不属于同一层级，因此选择器无法命中目标元素，效果不生效。

修复方案 #

方案1：调整HTML结构（兼容性最优） #

将复选框移到label标签外，通过id+for属性关联label和复选框，保证复选框和.sort div为同级兄弟元素，原有CSS无需修改：

<input id="sortToggle" class="sort__checkbox" type="checkbox">
<label for="sortToggle"> Sort </label>
<div class="sort">
  <h1>HELLO</h1>
  <form class = "sort__form" method="GET" action="{% url 'sort-page' %}">
    <input type="range" name="sort" class="sort__input">
  </form>
</div>

该方案兼容所有主流浏览器，包括旧版本浏览器。

方案2：仅修改CSS（无需改动HTML，需浏览器支持:has()伪类） #

如果你不想调整HTML结构，可以修改CSS选择器为以下内容，2023年及之后发布的主流浏览器均支持该写法：

label:has(.sort__checkbox:checked) ~ .sort {
  display: none;
}

内容的提问来源于stack exchange，提问作者user16476339