“第n个孩子”是如何工作的？ [复制]答案

【问题标题】：how does the "nth-child" work? [duplicate]“第n个孩子”是如何工作的？ [复制]
【发布时间】：2017-09-01 20:16:38
【问题描述】：

我目前正在学习 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>

问题是我得到了这个而不是这个

出了什么问题？我错过了什么理论？

【问题讨论】：

你错过了>，如header>:nth-child(1)
很奇怪，在我关注的教程（openclassroom）中，代码是：.element:nth-child(1) { flex: 2; } .element:nth-child(2) { flex: 1; }
但你的伎俩有效:)！谢谢！
当然，但header:nth-child(1) 表示“<header> 是其父级的第一个子级”。你想要“<header> 的第一个孩子”。

标签： html css

【解决方案1】：

header:nth-child(1)

意思是：

对于每个元素是其父元素的第一个子元素

仅针对您最顶部的元素。它是其父级（主体）的第一个子级

你也可以把它改写成

header
{
  display: flex;
}

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

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

【讨论】：