css - :firstclass rule used in tutorial, 并需要澄清原因

Question

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

我偶然发现了一些我无法确定需要的代码。该指南使用此规则来调整 Flexbox 导航中 Logo 的大小(两者嵌套在教程中):

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

由于 Logo 的第一个子项将是 .main-nav 列表项，因此从技术上讲，他将瞄准导航栏中列表中的第一个列表项，对吗？但出于某种原因，这些值和属性确实会影响 Logo 本身，而不是看似规则所针对的列表项。我忽略了什么才​​导致这种情况？谢谢!

这是示例元素的 fiddle :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;
}