“第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; 
}