“nth-child”如何运作？

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