css的first-child

<div id="test">
	<p>歷盡人間繁華，看遍人世滄桑，一顆孤獨的心在滾滾紅塵中漂泊不定。歲月如流水，靜靜的流，</p>
	<p>我是流水上一葉輕輕的扁舟，看兩岸美景無數，聽悅耳清音相伴。青山悠悠，炊煙裊裊，繁花似錦；</p>
	<p>風吹笛奏，花開的妙音，花落的惆悵，青草悽悽的嘆息，鳥兒婉轉的啼鳴。曾經的美好，在眼前閃過，</p>
	<p>在回憶裏綿綿的迴盪。</p>
</div>

:first-child 選擇器用於選取屬於其父元素的首個子元素的指定選擇器。

1.選擇了id爲test中的第一個<p>標籤。如果其父元素的第一個元素不是<p>,則沒有效果。

id爲test的即爲 p 的的父元素。

css樣式

#test p:first-child{
	background:red;
}

2.選擇該元素下的第一個元素，效果與上圖相同。無論第一個元素是什麼，都有效果。

#test>:first-child{
	background:red;
}

3選擇#test中的第一個<p>中的所有<i>

#test p:first-child i{
	background:red;
}

4.匹配所有p元素中的第一個i元素。第一個元素如果不是i，則無效。

p > i:first-child{}

last-child在ie8中無效。

http://caniuse.com/

caniuse

這個網站可以查詢，哪些瀏覽器支持哪些css屬性。