first-child 和 last-child的使用
2014-07-14 21:01
369 查看
CSS中存在着很多的伪类,在使用上各个浏览器差别很大,尤其是IE9以下,对伪类的支持非常有限。今天学习两个个伪类:first-child,:last-child。
支持的浏览器:IE7+,chrome,Firefox,Safari,Opera
li:last-child{ color:red; }来选择最后一个li元素。
支持的浏览器:IE9+,chrome,Firefox,Safari,Opera
通过在网上查找,有使用IE hack解决兼容性的方法,不过试了并不可靠。
first-child效果在IE6中没有显示出来
last-child效果在IE6、IE7中显示正常,在IE8中还是没有效果
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表示选择器元素集合中的最后一个元素,如上面的例子,可以使用ulli: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中还是没有效果
相关文章推荐
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- 让IE7/8使用CSS中first-child和last-child样式属性
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- 选择器的使用(first-child和last-child选择器)
- :last-child works, :first-child doesn't
- 【CSS3】---结构性伪类选择器-first-child+last-child
- Cognos函数(十二) - firstChild & lastChild
- 解析dom中的children对象数组元素firstChild,lastChild的使用
- [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
- 【CSS3】---结构性伪类选择器-first-child+last-child
- 自学STM32——使用keil MDK编译时,出现 error: L6236E: No section matches selector - cannot all be FIRST/LAST.
- CSS3中first-child、last-child、nth-child、nth-last-child
- (转帖)如何将字符串前后的空白去除? (使用string.find_first_not_of, string.find_last_not_of) (C/C++)
- vector::erase(iterator first, iterator last)使用须知
- 在IE中使用first-child
- IE6\7\8 :last-child 和 :first-chlid 兼容
- 【实用随记】ie下不支持first-child,last-child
- first与last的组合使用
- 选择器的使用(nth-child和nth-last-child选择器)
- :first-child :last-child IE5,IE6,IE7,IE8的css兼容性列表