css - :checked does not switch icons on toggle

Question

我一直在玩一个选中的菜单，当用一个图标点击它时，它会打开/关闭。我没有在 CodePen example 中包含图标但已将汉堡图标替换为 B，将关闭图标替换为 X。

我不明白的是为什么当它处于选中状态时它不会从 B 切换到 X，因为那时导航可以正常工作。以下是 HTML 和 CSS(使用 Sass)的代码。

<!-- nav -->
<nav class="nav" id="menu" role="navigation">

  <!-- nav toggle -->
  <label for="toggle" class="nav--btn">
    <span class="icon--burger" aria-hidden="true">B</span>
    <span class="icon--close" aria-hidden="true">X</span>
    <span class="text">MENU</span>
  </label>

  <input type="checkbox" id="toggle">
  <!-- /nav toggle -->

  <ul class="nav--toggle">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</nav><!-- /nav -->

CSS/萨斯

// Toggle
.nav--btn {
  background-color: lightgreen;
  display: block;
  float: left;
  padding: 2em;
  width: 100%;

  &:hover, &:focus {
    background-color: orange;
  }
}

#toggle,
.nav--toggle,
.icon--close,
#toggle:checked + .icon--burger {
  display: none;
}

#toggle:checked + .nav--toggle,
#toggle:checked + .icon--close {
  display: inline;
  transition: all 0.5s ease;
}

.text {
  /* Hide from the website but visible for screen readers */
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

// Navigation Menu
.nav {
  display: block;
  float: left;
  width: 100%;

  > ul {
    text-align: center;

    > li {
      display: block;
      float: left;
      width: 100%;

      background-color: lightgray;
      border-bottom: 2px solid darkgray;

      > a {
        display: block;
        float: left;
        width: 100%;
        padding: 2em 0;
      } // end a
    } // end li
  } // end ul
} // end nav

提前致谢。

Answer 1

在 CSS 中，+ 是一个 adjacent sibling combinator :

The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

但是你的 HTML 是

<label for="toggle" class="nav--btn">
  <span class="icon--burger" aria-hidden="true">B</span>
  <span class="icon--close" aria-hidden="true">X</span>
</label>
<input type="checkbox" id="toggle">

因此，这些选择器都不起作用:

#toggle:checked + .icon--burger
#toggle:checked + .nav--toggle

要修复它，请将您的 HTM 更改为

<input type="checkbox" id="toggle">
<label for="toggle" class="nav--btn">
  <span class="icon--burger" aria-hidden="true">B</span>
  <span class="icon--close" aria-hidden="true">X</span>
</label>

还有你的CSS

#toggle:checked ~ .nav--btn > .icon--burger {
  display: none;
}
#toggle:checked ~ .nav--toggle,
#toggle:checked ~ .nav--btn > .icon--close {
  display: block;
}

其中 ~ 是 general sibling combinator .

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  font-size: 16px;
}
p {
  margin-bottom: 2em;
}
.wrap {
  margin: 2em auto;
  width: 80%;
}
h1 {
  border-bottom: 4px solid #ccc;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1em;
}
.nav--btn {
  background-color: lightgreen;
  display: block;
  float: left;
  padding: 2em;
  width: 100%;
}
.nav--btn:hover,
.nav--btn:focus {
  background-color: orange;
}
#toggle,
.nav--toggle,
.icon--close,
#toggle:checked ~ .nav--btn > .icon--burger {
  display: none;
}
#toggle:checked ~ .nav--toggle,
#toggle:checked ~ .nav--btn > .icon--close {
  display: block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.text {
  /* Hide from the website but visible for screen readers */
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.nav {
  display: block;
  float: left;
  width: 100%;
}
.nav > ul {
  text-align: center;
}
.nav > ul > li {
  display: block;
  float: left;
  width: 100%;
  background-color: lightgray;
  border-bottom: 2px solid darkgray;
}
.nav > ul > li > a {
  display: block;
  float: left;
  width: 100%;
  padding: 2em 0;
}

<div class="wrap">
  <h1>Menu toggle with icon switch</h1>
  <p>Imagine the B for the burger icon and X for the close icon.</p>
  <!-- nav -->
  <nav class="nav" id="menu" role="navigation">
    <!-- nav toggle -->
    <input type="checkbox" id="toggle">
    <label for="toggle" class="nav--btn">
      <span class="icon--burger" aria-hidden="true">B</span>
      <span class="icon--close" aria-hidden="true">X</span>
      <span class="text">MENU</span>
    </label>
    <!-- /nav toggle -->
    <ul class="nav--toggle">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav><!-- /site-nav -->
</div><!-- /wrap -->