Question

我已经帮助编写了CSS＆amp;仅限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>

Answer 2

#nav-expand:checked + .nav-side

选择具有类.nav-side的元素，其中先前的兄弟元素（输入类型复选框）以ID nav-expand

进行检查

＆＃13;

#nav-expand:checked + .nav-side {
  color: red;
}

＆＃13;

<input type="checkbox" id="nav-expand" checked />
<div class="nav-side">
  test
</div>

＆＃13;

#nav-collapse + .main-base

当前一个兄弟元素的标识为.main-base时，选择包含类#nav-collapse的元素：

＆＃13;

#main-base + .main-base {
  color: red;
}

＆＃13;

<div id="main-base"></div>
<div class="main-base">test</div>

＆＃13;

#nav-collapse:checked + .main-base

与第一个例子相同。

#nav-collapse + .main-base > .overlay

选择带有类.overlay的直接子元素，哪个父元素具有类.main-base，其中前一个兄弟的标识为#nav-collapse：

＆＃13;

#nav-collapse + .main-base > .overlay {
  color: red;
}

＆＃13;

<div id="nav-collapse"></div>
<div class="main-base">
  <div class="overlay">
    test
  </div>
</div>

＆＃13;

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

与之前的内容相同，但此时标识为#nav-collapse的元素的输入类型为checkbox并已检查。

＆＃13;

#nav-collapse:checked + .main-base > .overlay {
  color: red;
}

＆＃13;

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

＆＃13;

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

2 个答案: