Html 这些CSS代码片段做什么？

我已经获得了帮助编码一个CSS&HTML纯响应菜单，我不确定一些CSS代码的含义，以下是我想要帮助的部分：

#导航展开：选中+导航侧{
#导航折叠+主基地{
#导航折叠：选中+主基座{
#导航折叠+.main base>.overlay{
#导航折叠：选中+.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>

&时代；
☰

我知道

选择任何元素的直接子元素，所以我猜

.main base>.overlay

意味着只有

.overlay

的子元素

.main base

会在选中

#nav collapse

时受到影响

是；并且仅当

.main base

直接跟随

#nav collapse

（这就是

+

的意思）时，如

选择类为

.nav-side

的元素，使用id

nav-expand

#导航展开：选中+导航侧{
颜色：红色；
}

测试

ok，那么对于这个html，如果你要评论/解释css的意思，你会怎么做？×；&9776；

@Viveka:我建议将HTML添加到您的问题中，因为注释不支持代码块，使其难以阅读。@Viveka:解释与您在我的添加中的解释几乎相同。因此，“.overlay，它是.main base的子元素，直接跟在它后面，#nav collapse，当它被选中时。”好的，所以css的最后两行只与html的最后三行相关？当它们按特定顺序排列时，它看起来是一种特定的方式？@BoltClockaah，好的，我想我现在明白了，谢谢！谢谢@AlexChar

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

<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>

#nav-expand:checked + .nav-side