div:first-child，先找到div元素，看看它是不是父元素的长子，如果是，那么就匹配之。
div:first-of-type，先找到div元素，看看它是不是父元素的第一种标签类型，如果是，那么匹配之。
举个例子，有如下代码：
<body>
<div class="title">
<h1 class="css">h1</h1>
<h2 class="css">h2</h2>
<div>
<h3 class="css">h3</h3>
</div>
<p class="css">p1</p>
<p class="css">p2</p>
<h2 class="css">h2#</h2>
</div>
</body>
我的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的父元素是<div class="title">，其第一个同类标签的子元素是p1，所以p2没有被选中。
- h2#的父元素是<div class="title">，其第一个同类标签的子元素是h2，所以h2#没有被选中。
