css - :checked selector CSS

Question

我一直在学习如何在没有 Javascript 的情况下创建移动导航，其背后的想法是使用复选框和 :checked CSS 选择器。当我在空白页面上测试它时，我设法让它工作，但是当我试图将它集成到我的实际站点时，它停止工作了。我将显示两者的代码，这样您就可以看到我哪里出错了(请注意，两个文档之间的 DIV ID 和类已更改，但我已确保 HTML 也相应更改，所以这不是问题) .

   .show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: black;
    background: #ac3333;
    text-align: center;
    padding: 10px 10px;
border: 1px black solid;

}

#menu {
display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


#hamburger {
display: inline-block;
}

.icon-bar {
display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin-bottom: 4px;
    background-color: black;

}

这是工作代码。这是非工作代码。在非工作代码中，单击按钮不会执行任何操作，我无法弄清楚原因!

body {
  margin: 0;
  line-height: 1.428;
}
.wrap {
  width: 90%;
  max-width: 71.5em;
  margin: 0 auto;
  padding: 0.625em 0.625em;
}
#header {
  background: #442869;
  padding-top: 1em;
  padding-bottom: 1em;
  min-height: 6em;
}
#mobile-navigation-btn {
  display: none;
}
#mobile-nav {
  display: none;
}
#regular-nav {
  display: block;
}
.show-menu {
  text-decoration: none;
  color: black;
  background: #ac3333;
  text-align: center;
  padding: 10px 10px;
  border: 1px black solid;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #mobile-nav {
  display: block;
}
#hamburger {
  display: inline-block;
}
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 4px;
  background-color: black;
}
@media only screen and (max-width: 768px) {
  #mobile-navigation-btn {
    display: block;
  }
  #regular-nav {
    display: none;
  }
}

<div id="header">
  <div class="wrap">
    <picture>
      <source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
        <img srcset="seiri-logo-small.png" alt="…">
    </picture>
    <div id="mobile-navigation-btn">
      <label for="show-menu" class="show-menu">Menu
        <div id="hamburger">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </div>
      </label>
      <input type="checkbox" id="show-menu" role="button">
    </div>
    <div id="regular-nav">
      <ul>
        <li><a href="#" class="current">Home</a>
        </li>
        <li><a href="#">Customer Research</a>
        </li>
        <li><a href="#">Business Improvement</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
      </ul>
    </div>



  </div>
</div>

<div id="mobile-nav">
  <ul>
    <li><a href="#" class="current">Home</a>
    </li>
    <li><a href="#">Customer Research</a>
    </li>
    <li><a href="#">Business Improvement</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
  </ul>
</div>

Answer 1

由于您的 css 选择器，它不起作用，输入和菜单需要像您当前设置的 css 一样是兄弟。阅读这篇文章以进一步了解 ~ 运算符

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

body {
  margin: 0;
  line-height: 1.428;
}
.wrap {
  width: 90%;
  max-width: 71.5em;
  margin: 0 auto;
  padding: 0.625em 0.625em;
}

#header {
  background: #442869;
  padding-top: 1em;
  padding-bottom: 1em;
  min-height: 6em;
}

#mobile-navigation-btn {
  <!--display: none;
  -->
}
#mobile-nav {
  display: none;
}

.show-menu {
  text-decoration: none;
  color: black;
  background: #ac3333;
  text-align: center;
  padding: 10px 10px;
  border: 1px black solid;
}
/*Hide checkbox*/

input[type=checkbox] {
  <!--display: none;
  -->
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #mobile-nav {
  display: block;
}
#hamburger {
  display: inline-block;
}
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 4px;
  background-color: black;
}
@media only screen and (max-width: 768px) {
  #mobile-navigation-btn {
    display: block;
  }
  #regular-nav {
    display: none;
  }
}

<!doctype html>

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement("picture");
  </script>
  <script src="picturefill.min.js" async></script>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="header">
    <div class="wrap">

      <picture>
        <source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
          <img srcset="seiri-logo-small.png" alt="…">
      </picture>

      <div id="mobile-navigation-btn">
        <label for="show-menu" class="show-menu">Menu
          <div id="hamburger">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </div>
        </label>
      </div>
      


    </div>
  </div>
<input type="checkbox" id="show-menu" role="button" />
  <div id="mobile-nav">
    <ul>
      <li><a href="#" class="current">Home</a>
      </li>
      <li><a href="#">Customer Research</a>
      </li>
      <li><a href="#">Business Improvement</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
      <li><a href="#">Blog</a>
      </li>
    </ul>
  </div>
</body>

</html>