龙喵专栏 /前端 /内容

CSS3选择器之nth-child使用详解

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

关于nth-child

语法:E:nth-child(n){}

说明:nth-child() 是CSS3的一个伪类选择器,匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

nth-child效果实例:

一、数字序号写法

E:nth-child(5){}   //数值

数字序号写法

E表示标签,divlispan等,下同。

注意:数字的序号是从1开始的哦,不像很多编程语言中索引是0开始的,参数是必须大于0的整数。

nth-child(n)数字序号

二、关键字写法

E:nth-child(even){} //偶数

nth-child关键字写法

E:nth-child(odd){}  //奇数

nth-child关键字写法

关键字写法中,只有 even 和 odd 两种,匹配序号为偶数与奇数的元素。

三、倍数写法:

E:nth-child(2n){}   //2倍

nth-child(2n)

E:nth-child(3n){}   //3倍

nth-child倍数写法

n是固定要写的,n从0开始遍历,直到找到所有匹配元素,n前加数值,加2就是2倍,可以任意的,1n, 2n, 3n, 4n, 5n... 依次类推。一般用到的就2n、3n比较多,再大也没什么意义了。

四、倍数分组写法:

倍数可以视为一组,比如3n,可以理解为3个li为一组,然后相加相减都是在这一组里面筛选的,相加、相减的值都是正整数的。n和+号n和-号是必须写的。

E:nth-child(2n+1){}   //倍数分组+值

倍数分组写法

这种写法简单理解就是“隔几取几”,比如 3n+1 表示“隔二取一”,其余类推。

E:nth-child(2n-1){}   //倍数分组-值

倍数分组写法

五、反向倍数分组写法:

E:nth-child(-n+2){}   //倍数负值

反向倍数分组写法

反向倍数是从最后一个开始往回算的。可以选取序号小于某个值的元素,比如 -n+2 可以选取前2个元素。

其他一些效果:

E:nth-child(n+3){}   //选取序号大于3的元素 也就是除前2个元素外的元素

li隔行怎么弄,想了半天才想到将li6个一组,每组里面再减去相应的,试了下还真的可以,效果如下:

li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3){}

通过上面的效果实例,可以发现不同写法出来的效果有些是一样的,比如:

E:nth-child(2n){}E:nth-child(even){}一样,

E:nth-child(2n+1){}E:nth-child(odd){}一样。

兼容方面,现代浏览器完全没问题,但IE浏览器仅支持IE9及以上哦,要想在低版本上使用,另外想办法吧

总结:nth-child选择的是子元素,如果只想选择同类的子元素,那应该使用nth-of-type选择器。nth-child 的同类选择器还有first-childlast-childonly-childnth-last-child

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

来源:http://blog.mingsixue.com/it/CSS-selector-nth-child.html

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/547.html

[ web前端导航 ]:http://ailongmiao.com/web/

评论

继续阅读

细数CSS伪元素及其用法

Web前端 2019-03-29 1

CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

GET和POST的区别

Web前端 2019-03-11 6

最近看了一些同学的面经,发现无论什么技术岗位,还是会问到 get 和 post 的区别?让我们先看一下标准答案长什么样子 w3school: GET

彻底解决滚动穿透方案

Web前端 2019-02-15 7

有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上

  选择打赏方式

打赏

打赏