css的nth选择器,CSS选择器之nth

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

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

效果实例:

一、数字序号写法 E:nth-child(5){} //数值

1

2

3

4

5

6

7

8

9

E表示标签,div, li, span等,下同。

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

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

二、关键字写法 E:nth-child(even){} //偶数

1

2

3

4

5

6

7

8

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

1

2

3

4

5

6

7

8

9

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

三、倍数写法: E:nth-child(2n){} //2倍

1

2

3

4

5

6

7

8

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

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

3n 4n 5n

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

四、倍数分组写法:

倍数可以视为一组,比如3n,可以理解为3个li为一组,然后相加相减都是在这一组里面筛选的,相加、相减的值都是正整数的。n和+号或n和-号是必须写的。 E:nth-child(2n+1){} //倍数分组+值

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

2n+1 2n+2 2n+3

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

3n+1 3n+2 3n+3

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

4n+1 4n+2 4n+3

这种写法简单理解就是“隔几取几”,比如 3n+1 表示“隔二取一”,其余类推。 E:nth-child(2n-1){} //倍数分组-值

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

2n-1 2n-2 3n-2

1

2

3

4

5

6

7

8

9

10

11

12 1

2

3

4

5

6

7

8

9

10

11

12 1

2

3

4

5

6

7

8

9

10

11

12

3n-1 4n-1 4n-2

五、反向倍数分组写法: E:nth-child(-n+2){} //倍数负值

1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9 1

2

3

4

5

6

7

8

9

-n+2 -n+3 -n+4

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

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

1

2

3

4

5

6

7

8

9

能有这篇文章,是因为聪聪问了我个问题,li隔行怎么弄,想了半天才想到将li6个一组,每组里面再减去相应的,试了下还真的可以,效果如下: li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3){}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

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

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

兼容方面,现代浏览器完全没问题,但IE浏览器仅支持IE9及以上哦,要想在低版本上使用,另外想办法吧,臣妾做不到呀o(>﹏

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

本文地址:http://blog.mingsixue.com/it/CSS-selector-nth-child.html 文章若需转载,请附上原文链接,谢谢配合。^_^

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值