如何使用：checked选择器选择元素

Question

  /*------------GENERAL------------*/

:root {
  --background: #515151;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  margin: 0 auto;
  font-family: sans-serif;
  line-height: 1.8;
  color: #515151;
  overflow-x: hidden;
}

p {
  font-size: 16px;
  color: #696969;
}


/*---------------------NAVIGATION--------------*/

.containerbox {
  scroll-behavior: smooth;
  overflow-y: auto;
  height: 100vh;
  width: 100%;
  margin: 0 auto;
}

.maincontainer {
  width: 70%;
  margin: 0 auto;
}

nav .nav-toggle {
  display: none;
}

nav {
  background-color: #f2f2f2;
  display: flex;
  padding: 20px 7px;
  position: fixed;
  z-index: 1000;
  width: 70%;
  margin: 0 auto;
}

.container-nav i {
  font-size: 40px;
  margin-top: 13px;
}

.container-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.container-nav .icons i {
  padding-left: 10px;
}

.menu ul {
  display: flex;
  padding: 11px;
  margin-left: 50px;
}

.menu ul li {
  list-style: none;
  padding: 10px 60px;
  border-right: 1px solid #515151;
}

.menu ul li:last-child {
  border: none;
}

.menu ul li a {
  text-decoration: none;
  font-weight: 600;
  color: #515151;
  font-size: 14px;
}

nav .logo {
  margin-top: 10px;
}


/*-------------HEADER------------------*/

header {
  padding-top: 100px;
}

.headerimage {
  position: relative;
  background: url(images/header.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  display: flex;
}

header .container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
  transform: translate(-50%, -50%);
}

header .container button:first-of-type {
  width: 60%;
  margin-top: 40px;
}

header .container button {
  width: 80%;
  margin-top: 20px;
  border: none;
  border-radius: 10px;
  background-color: #fc9e4f;
  padding: 7px;
  font-weight: bold;
  color: #515151;
  font-size: 22px;
}

header .container h2 {
  background-color: #515151;
  border: 2px #fc9e4f solid;
  font-size: 26px;
  color: white;
  border-radius: 10px;
  padding: 7px;
  margin-top: 30px;
  text-align: center;
}

header .titleheader {
  color: #515151;
  font-weight: 3000;
  text-align: center;
  margin: 35px;
}


/*---------------------MAIN SECTIONS----------------*/

.titleStrip {
  background-color: #fc9e4f;
  padding: 10px;
  color: #515151;
  padding-left: 20px;
}

.containertext {
  padding: 20px;
}

.section1 {
  display: flex;
  padding: 30px;
  justify-content: space-between;
}

.con1 {
  width: 60%;
}

.pictures {
  display: flex;
  width: 100%;
  overflow-x: hidden;
  flex-flow: row wrap;
}

.img {
  flex-basis: 33%
}

.img img {
  width: 100%;
}

.contact-form {
  background: url(images/contactform%20picture.JPG) no-repeat center;
  background-size: cover;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 600px;
}

.contact-form h2 {
  padding-bottom: 20px;
  font-weight: bold;
}

.contact-form input {
  padding: 9px;
  margin: 5px 0px 15px 20px;
  width: 250px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
}

.textarea {
  position: relative;
}

.contact-form textarea {
  height: 250px;
  width: 70%;
  padding: 6px;
  resize: none;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  margin-left: 20px;
  vertical-align: top;
}

.contact-form .submitButton button {
  padding: 9px;
  width: 100px;
  margin-top: 10px;
  border: none;
  left: 63%;
  border-radius: 10px;
  font-size: 18px;
  color: #515151;
}

.contact-form label {
  display: inline-block;
  width: 70px;
  font-weight: bold;
  padding-bottom: 10px;
}

.contact-form placeholder {
  font-size: 15px;
}


/*------------------MEDIA 680PX------------------*/

@media screen and (max-width: 780px) {
  .maincontainer {
    width: 98%;
    margin: 0 auto;
  }
  body {
    width: 100%;
  }
  nav {
    display: block;
    width: 95%;
    margin: 0 auto;
  }
  .logo img {
    width: 220px;
  }
  nav .menu ul {
    background-color: var(--background);
    display: none;
    width: 100%;
    margin: 0px;
  }
  nav .menu ul li {
    border-bottom: 1px solid white;
  }
  nav .menu ul a {
    color: white;
  }
  .togglecont {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    height: 100%;
    align-items: center
  }
  .container-nav {
    display: block;
  }
  .icons {
    display: none;
    padding-left: 10px;
    justify-content: flex-end
  }
  /*-------------- THIS IS THE CODE WHERE I NEED HELP-------------------------------*/
  nav .nav-toggle:checked~.menu ul {
    display: block;
  }
  nav .nav-toggle:checked~.icons {
    display: block;
  }
  .nav-toggle:checked~header {
    margin-top: 1000px;
  }
  /*-------------- HOW CAN I SELECT THE HEADER ELEMENT?-------------------------------*/
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    display: flex;
    justify-content: center;
    height: 4px;
    width: 45px;
    background-color: var(--background);
    color: white;
    position: relative;
    border-radius: 3px;
  }
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    content: "";
    position: absolute;
  }
  .nav-toggle-label span::before {
    bottom: 11px;
  }
  .nav-toggle-label span::after {
    top: 11px;
  }
  /*--------------------HEADER IMAGE---------------*/
  .headerimage {
    width: 100%;
    margin: 0 auto;
  }
  header .container button {
    font-size: 17px;
  }
  .headerimage .container {
    width: 100%;
  }
  .headerimage .container img {
    width: 100%;
    padding: 3%;
  }
  header .container h2 {
    font-size: 17px
  }
  /*------------------SECTION ONE------------------*/
  .section1 {
    display: block;
    margin: 0 auto;
    padding: 0px;
    width: 95%;
    overflow-x: hidden;
    padding-top: 20px;
  }
  .section1 img {
    display: flex;
    margin: 0 auto;
    padding: 0px;
    height: 370px;
  }
  .section1 .containertext {
    width: 95%;
    margin: 0 auto;
    padding: 20px 0px;
    ;
  }
  .titleStrip {
    padding-left: 20px;
    font-size: 13px;
  }
  .contact-form {
    height: 630px;
  }
  .contact-form textarea {
    width: 90%;
    margin-left: 20px;
    height: 140px;
  }
  .contact-form input {
    width: 90%;
  }
  .contact-form label {
    margin-left: 20px;
  }
  .contact-form h2 {
    margin-left: 20px;
  }
  .contact-form button {
    margin-bottom: 20px;
  }

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="stylesheet.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


</head>

<body>
  <div class="containerbox">
    <div class="maincontainer">
      <nav>
        <div class="togglecont">

          <label for="nav-toggle" class="nav-toggle-label">
<span></span></label>
          <div class="logo">
            <img src="images/logo.png" width="200px">
          </div>
        </div>

        <div class="container-nav">


          <input type="checkbox" id="nav-toggle" class="nav-toggle">


          <div class="menu">
            <ul>
              <li><a href="#about">About Us</a></li>
              <li><a href="#quote">Get a Quote</a></li>
              <li><a href="#form">Contact Us</a></li>
            </ul>


          </div>
          <div class="icons"><i class="fab fa-facebook-square"></i><i class="fas fa-phone-square"></i></div>
        </div>


      </nav>
      <header>
        <div class="headerimage">
          <div class="container">
            <img src="images/Logowhite.png" width="450px">
            <button><span> Tel: 020 1993 2333</span>

<button><span> info@ldnandessexwaste.co.uk</span></button>


            <h2> FAST FRIENDLY, SAME DAY SERVICE</h2>
          </div>
        </div>
        <h1 class="titleheader"> THE BEST WAY TO GET YOUR PROPERTY JUNK-FREE</h1>
      </header>

      <div class="titleStrip" id="about">
        <h2>About Us</h2>
      </div>
      <div class="section1">
        <img src="images/kierownik.jpg" width="340px" height="400px">
        <div class="containertext con1">
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
            looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
            of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
            comes from a line in section 1.10.32.</p>
        </div>


      </div>
      <div class="section2">
        <div class="titleStrip">
          <h2>Why we are better than a skip</h2>
        </div>

        <div class="containertext">
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
            looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
            of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
            comes from a line in section 1.10.32.</p>
        </div>
        <div class="pictures">
          <div class="img"><img src="images/picture1.jpg"></div>
          <div class="img"><img src="images/picture2.jpg"></div>
          <div class="img"><img src="images/picture3.jpg"></div>
        </div>


      </div>
      <div class="section3" id="quote">
        <div class="titleStrip">
          <h2>How to Get a Quotation</h2>
        </div>
        <div class="containertext">
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
            looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
            of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
            comes from a line in section 1.10.32.</p>
        </div>
      </div>
      <a name="form"></a>
      <form class="contact-form" action="contactform.php" method="past">

        <h2>Contact Us:</h2>
        <span><label for="name">Name:</label><input  type="text" id="name" name="name" placeholder=""></span>
        <span><label for="email">E-mail:</label><input type="text" id="email" name="mail" placeholder=""></span>
        <span><label for="subject">Subject:</label><input type="text" id="subject" name="subject" placeholder=""></span>
        <div class="textarea">
          <label for="textarea">Message:</label>
          <textarea name="message" id="textarea" placeholder=""></textarea>
        </div>
        <div class="submitButton">
          <button type="submit" name="submit">Send</button></div>
    </div>
    </form>
  </div>

</html>
</body>

</html>

你好聪明！

我正在创建一个网站，但是在选择元素时遇到了一个小问题。

我仅使用CSS创建下拉菜单，因此决定使用复选框在电话屏幕上下拉菜单。但是我在选择标题元素时遇到了问题。我想选择标题元素以在菜单打开时添加填充，以使其向下并可见。 我想知道当有人单击.nav-toggle时如何选择标题。 .nav-toggle：已选中〜标头{ margin-top：1000px;

我希望我很清楚。

谢谢