html - 选择子元素 css

Question

嘿，我正在为我正在参加的网页设计类(class)做一些事情。我正在尝试选择这些 <h2>的内部元素 <divclass=left>但它对我不起作用。

nav {
    display: flex;
    flex-direction: row;
    height: 75px;
    background-color: rebeccapurple;
    color: white;
    justify-content: space-between;
   

}

.left h2{margin-left: 20px}

.right{
 }

body{padding:0; margin: 0}


 
.boxs {
    display: flex
}

.boxs>* {
    padding: 5px;
    height: 200px;
    border: black solid 2px;
    box-sizing: border
}

  <nav>
    <nav>
       <div class=left></div> <i class="fas fa-ad"></i>
      <h2>Home</h2>
      <h2>Browser</h2>
      <h2>Download</h2>
      <h2>Contact us</h2>
    </nav>
    <div class="right"><h2>Sign-in</h2></div>
  </nav>

Answer 1

您的 left 类的 div 没有包装任何东西。如果您希望 CSS .left h2 正常工作，您的 HTML 应该如下所示。

.left h2{margin-left: 20px}

<nav>
  <nav>
    <div class="left"> <i class="fas fa-ad"></i>
      <h2>Home</h2>
      <h2>Browser</h2>
      <h2>Download</h2>
      <h2>Contact us</h2>
    </div>
  </nav>
  <div class="right">
    <h2>Sign-in</h2>
  </div>
</nav>