浏览器忽略复选框关联的#popup元素overflow-y CSS规则问题

我有一个id为popup的div用作弹出菜单，内部包含一个标有“More”的复选框，点击该复选框可显示额外的菜单列表。但无论怎么修改#popup的overflow-y: scroll样式，页面都没有变化，浏览器直接忽略了这条CSS规则。

相关代码如下：

CSS代码 #

#popup {
  ... height: 13em;
  overflow: hidden;
  ...
}

#popup_more {
  visibility: hidden;
}

#popup_more_checkbox:checked~#popup_more {
  visibility: visible;
}

#popup_more_checkbox:checked~#popup_more_checkbox_label {
  visibility: hidden;
}

#popup_more_checkbox:checked~#popup {
  overflow-y: scroll;
}

HTML代码 #

<div id="popup">
  <ul id="popup_list">
    ...
  </ul>
  <input id="popup_more_checkbox" type="checkbox" style="display: none;" />
  <label id="popup_more_checkbox_label" for="popup_more_checkbox">More</label>
  <div id="popup_more">
    <ul id="popup_more_list">
      ...
    </ul>
  </div>
</div>

CSS的兄弟选择器~只能选中当前元素之后的同级元素，但#popup_more_checkbox是#popup的子元素，#popup是它的父级节点，所以#popup_more_checkbox:checked~#popup这个选择器根本无法匹配到目标元素——父元素不在子元素的同级兄弟范围内。

方案1：调整HTML结构，将复选框移至#popup同级 #

把#popup_more_checkbox和#popup放在同一层级，让兄弟选择器能够正常生效：

修改后的HTML代码：

<input id="popup_more_checkbox" type="checkbox" style="display: none;" />
<div id="popup">
  <ul id="popup_list">
    ...
  </ul>
  <label id="popup_more_checkbox_label" for="popup_more_checkbox">More</label>
  <div id="popup_more">
    <ul id="popup_more_list">
      ...
    </ul>
  </div>
</div>

调整后，原CSS中的#popup_more_checkbox:checked~#popup就能正确选中#popup元素，修改其overflow属性。

方案2：使用CSS变量间接控制父元素样式（无需修改HTML） #

如果不想调整HTML结构，可以借助CSS变量的继承特性，间接修改父元素的overflow属性：

修改后的CSS代码：

#popup {
  height: 13em;
  overflow: var(--popup-overflow, hidden);
  /* 保留其他原有样式 */
}

#popup_more {
  visibility: hidden;
}

#popup_more_checkbox:checked~#popup_more {
  visibility: visible;
}

#popup_more_checkbox:checked~#popup_more_checkbox_label {
  visibility: hidden;
}

#popup_more_checkbox:checked {
  --popup-overflow: scroll;
}

CSS变量会从子元素继承到父元素，当复选框被选中时，子元素设置的--popup-overflow变量会传递给父元素#popup，从而实现overflow属性的切换。

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