「第n孩子」是如何工作的？

Question

我目前在學習HTML/CSS並且有困難。我的HTML是：

header 
 
{ 
 
    display: flex; 
 
} 
 

 
header:nth-child(1) 
 
{ 
 
    flex: 1; 
 
    background: white; 
 
} 
 

 
header:nth-child(2) 
 
{ 
 
    flex: 2; 
 
    background: black; 
 
}

<header> 
 
    <div id = "Titre Principal"> 
 
     <img src = "images/zozor_logo.png" alt = "Logo de Zozor"/> 
 
     <h1 class = "zouz"> Zozor </h1> 
 
     <h2 class = "hoodie"> Carnets de voyage </h2> 
 
    </div> 
 
    <nav> 
 
     <ul class = "hoodie"> 
 
      <li><a href = "#"> ACCUEIL </a></li> 
 
      <li><a href = "#"> BLOG </a></li> 
 
      <li><a href = "#"> CV </a></li> 
 
      <li><a href = "#"> CONTACT </a></li> 
 
     </ul> 
 
    </nav> 
 
</header>

的問題是，我得到這個 ，而不是這個

到底哪裏出問題了？我錯過了什麼理論？

Answer 1

header:nth-child(1) 

表示：

對於每個被其父

只攻擊你的最頂端元素的第一個子元素。這是其母公司的第一個孩子（的身體）

你也可以改寫這個作爲

header 
{ 
    display: flex; 
} 

div:nth-child(1) 
{ 
    flex: 1; 
    background: white; 
} 

nav:nth-child(2) 
{ 
flex: 2; 
background: black; 
}