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属性。