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中还是没有效果