码迷,mamicode.com
首页 > 其他好文 > 详细

nth-child()和nth-of-type()的区别

时间:2020-02-23 22:15:44      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:标签   一个   选择器   表达式   的区别   列表   限制   数字   类型   

两者都是选择器,在CSS和JS中,都可以用来选择元素。得到一个元素,或者元素集。

x:nth-child(n)  获取 x元素的父元素中,第n个元素。无类型限制。

x:nth-of-type(n) 获取x元素父元素中,第n个x元素。限制了类型。

因此,仅仅从字面意义上,就能做好区分了,一个是限制了类型,一个是不限制。

 

关于其中的参数,可以是数字,也可以表达式,也可以是固定的字母。

el:nth-child(2):选择父元素列表中的第 2 个标签。

el:nth-child(n):选择父元素列表中的第 n 个标签。

el:nth-child(2n):选择父元素列表中的第 2n 个标签,也就是偶数个元素。

el:nth-child(n+n):选择父元素列表中的第 n 个标签后的标签。

el:nth-child(-n+n):选择父元素列表中的第 n 个标签之前的标签。

el:nth-child(odd):选择父元素列表中的是奇数的标签。

el:nth-child(even):选择父元素列表中的是偶数的标签。

 

el:nth-child(n+3):未知

el:nth-child(n-3):未知

nth-child()和nth-of-type()的区别

标签:标签   一个   选择器   表达式   的区别   列表   限制   数字   类型   

原文地址:https://www.cnblogs.com/cn-oldboy/p/12354487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!