Question

我正在浏览树屋的一些教程 - 这个教程在flexbox navigation

上

我偶然发现了一些代码，我看到我无法确定是否需要。该指南使用此规则来调整flexbox导航中的徽标大小（两者嵌套在教程中）：

.main-logo:first-child{
    margin-right: 50px;
    flex-grow: 1.5;
}

由于徽标的第一个孩子将是.main-nav列表项，他在技术上将目标锁定在导航栏列表中的第一个列表项，对吗？但是出于某种原因，值和属性确实影响了徽标本身，而不是看似以规则为目标的列表项。我忽略了什么使得情况如此？谢谢！

以下是示例项目的小提琴：http://jsfiddle.net/u7rb0gzd/

该规则位于CSS的第97行。该项目工作正常，我只是在弄清楚为什么这个规则有效。

谢谢！

Answer 1

:first-child规则选择器定位作为其父元素的第一个子元素的元素。因此，当您使用.main-logo:first-child时，您选择的是具有类.main-logo的任何元素，这些元素是其父元素的第一个子元素。

假设您有以下HTML：

<ul class="main-nav">
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

您可以使用以下CSS为第一个列表项着色：

.main-nav li:first-child {
  color: red;
}

Answer 2

:first-child将针对每个父母的目标规则的第一个元素，考虑以下标记：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

以下风格：

ul li:first-child {
    color: red;
}

这会将红色应用于每个li的第一个ul元素：

<ul>
    <li>a</li> -> red
    <li>b</li>
    <li>c</li>
</ul>

<ul>
    <li>a</li> -> red
    <li>b</li>
    <li>c</li>
</ul>