字体-字体+

CSS3中nth-child选择器详细用法

2017-11-19 html+css 访问量 138

首先它的定义是:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。比如我们可以使用它来对表格进行隔行换色,使用起来还是非常方便的。

所有主流浏览器都支持nth-child,但是除了IE8以及它的更早版本不行。

下面来看看它的具体示例用法。

:nth-child(n+2)选取大于等于2标签,“n”表示整数

:nth-child(-n+2)选取小于等于2标签

:nth-child(2n)选取偶数,2n也可以用even代替

:nth-child(2n-1)选取奇数,2n-1也可以用odd代替

:nth-child(3n+1)自定义选取标签,3n+1可以理解为(1,4,7,10...)

:last-child选取最后一个标签,这个就比较好理解了

:nth-last-child(2)选取倒数第几个标签,2表示选取第2个,这个也是比较好理解的了

总之,nth-child这个东东的功能实在是太让人喜爱了,自己平时在写css的时候经常用到它,因为它带来的开发便利很明显,只有自己使用过后才知道。

原文来自:http://www.dawnfly.cn/article-1-373.html,转载请注明出处,谢谢【破晓博客复制链接地址

2017春季新款女装上衣衬衫女长袖百搭印花系带蝴蝶结雪纺衫衬衣潮