CSS：first-child和：first-of-type（示例）

Question

我仍然在学习使用实例的第一个孩子和第一个类型的伪类之间的区别。

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

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

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

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

难道不是＆＃39;吨...

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

...如果从代码中删除了前一个：first-of-type，那么应该将文本颜色变为红色？

Answer 1

Here's a great explanation on CSS Tricks。基本上，#blog div的第一个孩子不是article元素;它是header元素。如果元素是父容器中的第一个元素，:first-child将匹配元素。 :first-of-type将匹配一个元素，如果它是父容器中其类型的第一个元素，无论其前面是否还有其他元素。