我有一个名为“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>
2条答案
按热度按时间oknwwptz1#
正如j08691所评论的,
~
是通用的兄弟选择器,#popup不是#popup_more_checkbox的兄弟,对于您要尝试实现的目标,请使用CSS中新的:has()
选择器:70gysomp2#
来自MDN:
常规同级组合符
如果你想选择一个元素的兄弟元素,即使它们不是直接相邻的,那么你可以使用通用的兄弟组合子(
~
)。要选择所有在<p>
元素之后的<img>
元素,我们可以这样做:p ~ img
但在
#popup_more_checkbox:checked ~ #popup
中却不是这样。