Sass子元素选中问题求助：如何正确使用first-child选择器

问题根源 #

你之前用:first-child无效，是因为这个选择器的规则是匹配父元素的第一个子元素，而你的.navigation容器里第一个子元素是<h2 id="logo">，不是<nav>，所以两种写法都无法选中目标nav。

正确写法 #

你需要用:first-of-type选择器，它会匹配父元素下同标签类型的第一个元素，刚好符合你的需求。

对应的Sass代码可以写成：

.navigation > nav:first-of-type {
  background: red;
}

或者用Sass的嵌套写法：

.navigation {
  > nav:first-of-type {
    background: red;
  }
}

另外还有两种可选写法：

• 用相邻兄弟选择器，直接选中h2后面的第一个nav：

.navigation h2 + nav {
  background: red;
}

• 用:nth-of-type(1)，效果和:first-of-type一致：

.navigation > nav:nth-of-type(1) {
  background: red;
}

关键概念区分 #

• :first-child：只看父元素的第一个子节点，不管节点标签类型。
• :first-of-type：只看父元素下相同标签的第一个节点，忽略前面其他标签的子元素。

内容的提问来源于stack exchange，提问作者Noc er Gal