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

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

<ul>
	<li>列表項一</li>
	<li>列表項二</li>
	<li>列表項三</li>
	<li>列表項四</li>
</ul>

在上述程式碼中，如果我們要設定第一個li的樣式，那麼程式碼應該寫成li:first-child{sRules}，而不是ul:first-child{sRules}

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

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

<div>
	<h2>我是一個標題</h2>
	<p>我是一個p</p>
</div>

只是在p前面加了一個h2標籤，你會發現選擇器失效了，沒有命中p，why?

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元素可能在子元素列表中的任何位置）。

  <div class="demo">
  	<p>p1</p>
  	<p>p2</p>
  	<span>span1</span>
  	<p>p3</p>
  	<span>span2</span>
  </div>
   
  

       如上HTML，我們要命中父元素 .demo 的第一個 span 子元素，CSS 程式碼如下：

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

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

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

<div class="demo">
	<span>span1</span>
	<p>
		<span>span2</span>
		<span>span3</span>
	</p>
	<span>span4</span>
</div>

     如上HTML，如果我想匹配其中的第1個span，程式碼如下：

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

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

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

參考網址：http://css.doyoe.com/selectors/pseudo-classes/first-child.htm

                  http://css.doyoe.com/selectors/pseudo-classes/first-of-type.htm