CSS :first-child 和 :first-of-type （示例）[重复]答案

【问题标题】：CSS :first-child and :first-of-type (example) [duplicate]CSS :first-child 和 :first-of-type （示例）[重复]
【发布时间】：2015-12-30 21:35:04
【问题描述】：

我仍在使用实时示例了解 :first-child 和 :first-of-type 伪类之间的区别。

我从另一个网站复制了一些 HTML/CSS 代码，将其添加到：http://codepen.io/muygalan/pen/RroQNp。

问题：当我从我的 CSS 文件中删除以下代码时：

#blog article:first-of-type {
background: green;
}

为什么嵌套在<article> 标签内的文本没有变成红色？

不是……

#blog article:first-child {
color: red;
}

...如果之前的 :first-of-type 已从代码中删除，是否应该将文本颜色变为红色？

【问题讨论】：

选择器article:first-child 没有选择任何内容，因为article 元素不是第一个子元素（<header> 是第一个子元素）。 :first-of-type 伪类将根据其 type 选择第一个元素，这就是 article:first-of-type 将背景设置为绿色的原因。
this 是否为您解决问题？
@JoshCrozier 理解了我的困惑。谢谢！

标签： html css css-selectors pseudo-class

【解决方案1】：

Here's a great explanation on CSS Tricks。基本上，#blogdiv 的第一个子元素不是article 元素；这是一个header 元素。 :first-child 将匹配一个元素，如果它是父容器中的第一个元素。 :first-of-type 将匹配一个元素，如果它是父容器中其类型的第一个元素，则不管它之前是否有其他元素。

【讨论】：