div:first-child和div:first-of-type的作用和区别

div:first-child，先找到div元素，看看它是不是父元素的长子，如果是，那么就匹配之。

div:first-of-type，先找到div元素，看看它是不是父元素的第一种标签类型，如果是，那么匹配之。

举个例子，有如下代码：

  
h1
  
h2
  

    
h3
  
  
p1
  
p2
  
h2#

我的CSS写成

.css:first-child{
  color: red;
}

这时候，页面显示的是

Paste_Image.png

原因是，先找到class=css的所有元素，为 h1、h2、h3、p1、p2、号h2#，然后一个一个看它们是不是父元素的第一个子元素，符合要求的有 h1、h3，匹配之，变红色。

假如CSS写成

.css:first-of-type{
  background: yellow;
}

那么页面显示的是

Paste_Image.png

p2、h2# 没有被选中的原因：

• p2的父元素是
  ，其第一个同类标签的子元素是p1，所以p2没有被选中。
• h2#的父元素是
  ，其第一个同类标签的子元素是h2，所以h2#没有被选中。