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#沒有被選中。
