浏览器忽略复选框的css规则

wmvff8tz  于 2023-02-14  发布在  其他
关注(0)|答案(2)|浏览(119)

我有一个名为“popup”的div,用于显示弹出菜单,并带有标签“more”的复选框,用于获取更多菜单项,它显示附加列表。
即使我更改“#popup”或“overflow-y:scroll;”-没有任何更改,浏览器忽略此规则。

#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;
}
<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>
oknwwptz

oknwwptz1#

正如j08691所评论的,~是通用的兄弟选择器,#popup不是#popup_more_checkbox的兄弟,对于您要尝试实现的目标,请使用CSS中新的:has()选择器:

#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:has(#popup_more_checkbox:checked) {
  overflow-y: scroll;
}
<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>
70gysomp

70gysomp2#

来自MDN:

常规同级组合符

如果你想选择一个元素的兄弟元素,即使它们不是直接相邻的,那么你可以使用通用的兄弟组合子(~)。要选择所有在<p>元素之后的<img>元素,我们可以这样做:p ~ img
但在#popup_more_checkbox:checked ~ #popup中却不是这样。

相关问题