英文:
css rule for checkbox is being ignored by browser
问题
我有一个名为"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>
英文:
I have a div named "popup" which is used to show popup menu and has checkbox with label "more" which is used to get some more items for menu, it displays additional list.
Even if i change "#popup" or "overflow-y: scroll;" - nothing has changed, browser ignores this rule.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-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>
<!-- end snippet -->
答案1
得分: 0
根据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>
（请注意，我只翻译了代码部分，没有翻译问题文本。）
英文:
As j08691 commented, ~ is the general sibling selector and #popup isn't a sibling of #popup_more_checkbox. For what you're trying to achieve use the new :has() selector in CSS:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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:has(#popup_more_checkbox:checked) {
overflow-y: scroll;
}
<!-- language: lang-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>
<!-- end snippet -->
答案2
得分: 0
从MDN：
通用兄弟组合器
如果您想选择元素的兄弟元素，即使它们不是直接相邻的，您可以使用通用兄弟组合器（
~）。要选择所有在<p>元素之后出现的<img>元素，我们会这样做：p ~ img
而在#popup_more_checkbox:checked ~ #popup中并非如此。
英文:
From MDN:
> ### General sibling combinator
> If you want to select siblings of an element even if they are not directly adjacent, then you can use the
> general sibling combinator (~). To select all <img> elements that
> come anywhere after <p> elements, we'd do this: p ~ img
And that's not the case in #popup_more_checkbox:checked ~ #popup.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论