这些CSS代码片段有什么作用？

Question

我已经获得了编写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>

Answer 1

我已经明白,>选择任何一个元素的直接子元素,所以我想这.main-base > .overlay意味着只有.overlay那个孩子.main-base才会被#nav-collapse检查？

是; 并且只有当.main-base直接跟随#nav-collapse(这是+手段)时,如同

<input id="nav-collapse" type="checkbox" checked>
<div class="main-base">
  <div class="overlay"></div>
</div>

在.overlay这些例子中不会受到影响:

<input id="nav-collapse" type="checkbox" checked>
<div class="main-base">
  <div>
    <div class="overlay"></div> <!-- Not a child of .main-base -->
  </div>
</div>

<p><input id="nav-collapse" type="checkbox" checked></p>
<div class="main-base"> <!-- Not an immediate sibling of #nav-collapse, but of the p -->
  <div class="overlay"></div>
</div>

<input id="nav-collapse" type="checkbox" checked>
<h1></h1>
<div class="main-base"> <!-- Not an immediate sibling of #nav-collapse, but of the h1 -->
  <div class="overlay"></div>
</div>