first-child 和 last-child的使用

CSS中存在着很多的伪类，在使用上各个浏览器差别很大，尤其是IE9以下，对伪类的支持非常有限。今天学习两个个伪类:first-child，:last-child。

1、:first-child

:first-child表示选择器元素集合中的第一个元素，如以下代码可以使用ul li:first-child{ color:red; }来选择第一个li元素。

<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>last item</li>
</ul>

支持的浏览器：IE7+，chrome，Firefox， Safari，Opera

2、:last-child

:last-child表示选择器元素集合中的最后一个元素，如上面的例子，可以使用ul li:last-child{ color:red; }来选择最后一个li元素。

支持的浏览器：IE9+，chrome，Firefox，Safari，Opera

通过在网上查找，有使用IE hack解决兼容性的方法，不过试了并不可靠。

ul li{
	/* first-child */  
	background-color:expression(this.previousSibling==null?'#f00':'');   
	/* last-child */  
	background-color:expression(this.nextSibling==null?'#f00':'');
}

使用上面的hack方法

first-child效果在IE6中没有显示出来

last-child效果在IE6、IE7中显示正常，在IE8中还是没有效果