小编Viv*_*ka 的帖子

我已经获得了编写CSS和HTML响应式菜单的帮助,并且不确定某些CSS代码的含义,这些是我想要帮助的部分:

#nav-expand:checked + .nav-side {
#nav-collapse + .main-base {
#nav-collapse:checked + .main-base {
#nav-collapse + .main-base > .overlay {
#nav-collapse:checked + .main-base > .overlay {

我已经明白,>选择任何一个元素的直接子元素,所以我想这.main-base > .overlay意味着只有.overlay那个孩子.main-base才会被#nav-collapse检查？我几乎是初学者所以请保持解释简单=)

编辑:这是裸HTML的外观:

<input type="radio" id="nav-expand" name="nav" class="invis" /> 
<nav class="nav-side">
<label for="nav-collapse" class="close">
&times;
</label>
<label for="nav-expand" class="btn-label">
&#9776;
</label>
<ul class="menu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
<input type="radio" id="nav-collapse" name="nav" checked="checked"        class="invis" />
<main class="main-base">
<label for="nav-collapse" class="overlay"></label>