Css ：教程中使用的第一类规则，需要澄清原因

我正在浏览一些关于treehouse的教程-这是一个关于

我偶然发现了一些我看不出需要的代码。指南使用此规则调整flexbox导航中徽标的大小（这两个在教程中嵌套）：

因为logo的第一个子项是.main导航列表项，所以从技术上讲，他将定位导航栏列表中的第一个列表项，对吗？然而，由于某些原因，这些值和属性确实影响了徽标本身，而不是规则似乎针对的列表项。是什么让我忽略了这一点？谢谢

下面是示例项目的一部分：

规则在CSS的第97行。这个项目运作良好，我只是很难弄清楚为什么这个特定的规则会起作用

---

谢谢

规则选择器的

：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>

---

<代码>：第一个孩子将针对他们的父母中的每一个规则的第一个元素，考虑下面的标记：

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

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

这会将红色应用于每个

ul

的第一个

li

元素：

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

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

a
->红色
b
c


a
->红色
b
c

我理解第一个子伪类本身，但如何理解。主徽标：在本例中，当选择徽标的子级时，第一个子类为主徽标本身设计样式？我不是选择徽标的子级，而是选择带有类的第一个元素。主徽标我理解第一个子伪类本身，但是.main logo：在本例中，当选择logo的子元素时，第一个子元素如何设置主logo本身的样式？

。主logo

不是父元素！它是其他

li

元素的兄弟（仔细观察）

.main logo

也是

的
li:first child
。main nav

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

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

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