使用:first-child發現選擇不起效，網上查了發現自己對:first-child和:first-of-type區別的認識不到。

:first-child 匹配父元素的第一個子元素E。

• 列表項一
• 列表項二
• 列表項三
• 列表項四

假設將程式碼簡單地修改一下：

p:first-child{color:#f00;}

我是一個標題

我是一個p

E:first-child選擇符，E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子元素。與之類似的偽類還有E:last-child，只不過情況正好相反，需要它是最後一個子元素。

同理 :last-child（選擇最後一個元素）

:first-of-type 匹配父元素下第一個型別為E的子元素。

需要注意3個要點：

首先，該選擇符要匹配的是型別為E的子元素，這意味著E元素必須作為某個元素的子元素存在（E元素的父元素最高是html，也就是說E元素本身最高只能是body，這表示任何非html的元素都符合這個約束，因為html元素是根元素。）
其次，該選擇符要匹配的是父元素第一個型別為E的子元素，這意味著被命中的元素不一定是父元素的第一個子元素（因為排在父元素首位的不一定是E元素，E元素可能在子元素列表中的任何位置）。

p1

p2

p3

   .demo span:first-of-type { color: #f00; }

   此時 .demo 的第1個元素並沒有被匹配到，而是匹配到了第3個子元素，因為第3個子元素正好是 .demo 的第1個span子元素

再次，只能匹配與E元素同級的元素，即：E元素的兄弟元素。來看下面這個例子：

span2 span3

  .demo span:first-of-type { color: #f00; }

 結果span1和span2都會被命中，因為span1和span2分屬不同的父元素，並且都是其父元素的首個span元素，所以都會被命  中。
 

同理 :last-of-type（選擇最後一個元素）