选择子元素css

Question

嘿，我正在为我正在参加的Webdesign课程做一些事情。我正在尝试选择这些<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>

Answer 2

如果要选择h2元素，可以尝试以下方法：

nav h2 {
  color: red;
}