nth-child和nth-of-type的详解及区别
在工作中,经常会用到CSS中的选择器,选择器也分为很多种,比如:ID选择器,类选择器,标签选择器,伪类选择器等等,那今天就着重讲讲伪类选择器中的nth-child
是什么意思,nth-child
怎么使用,以及他与nth-of-type
的不同,他们都是CSS3中的伪类选择器,而且很多人认为意思差不多,其实不然,他们还是有区别的,那接下里,就和大家聊聊CSS3nth-of-type
和nth-child
的使用方法,以及他们之间的区别。
nth-child()
与 nth-of-type()
的区别
nth-child(n):
匹配父元素中的第 n 个子元素,元素类型没有限制。nth-of-type(n):
匹配同类型中的第n个同级兄弟元素。- n可以是一个数字,一个关键字,或者一个公式,比如:
nth-child(odd)
奇数 ,nth-child(even)
偶数。
nth-child
和nth-of-type
的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。相同之处是,两者都是找到元素之后再与前面的选择符进行匹配,这里的匹配方式是一样的。
稍微往下延伸,清楚了查找方式,那么不管前面的选择符怎么变,最后都是先查找到元素再与前面的选择符进行匹配。也就是说选择符与他们的查找方式没有关系。弄清楚这个就不会被不同的组合混淆了。
看这个定义也许还不是很清楚他们的区别,接下来我们通过代码和图片来一点点来区分。
举个栗子
运行代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=Copyright content=Tencent> <meta http-equiv=X-UA-Compatible content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>nth-child和nth-of-type的详解及区别-www.tonjay.com</title> </head> <style> *{ font-family: -apple-system, SF UI Text, PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;} body{ background: #eee;} .main{ background: #fff; margin: 20px auto; padding: 40px; border-radius: 6px; max-width: 640px;} .main p:nth-child(2n){ color: red; font-weight: 800;} .main p:nth-of-type(2n){ color: blue;} pre {white-space:pre-wrap;word-wrap:break-word;font-size:14px;line-height:22px;font-family:Menlo,Monaco,Consolas,"Courier New","Noto Sans CJK SC","Source Han Sans CN",SimHei;background-color:#fbfbfb;background-image:linear-gradient(transparent 50%,rgba(255,255,255,0.5) 50%);background-size:100% 44px;padding:22px 15px;margin:2px 0 24px;} </style> <body> <div class="main"> <pre>.main p:nth-child(2n){ color: red; font-weight: 800;} .main p:nth-of-type(2n){ color: blue;}</pre> <p>1、Document--p</p> <p>2、Document--p</p> <p>3、Document--p</p> <div>4、Document--div</div> <p>5、Document--p</p> <p>6、Document--p</p> <div>7、Document--div</div> <p>8、Document--p</p> <ul> <li><p>9、Document--li>p</p></li> <li><p>10、Document--li>p</p></li> <li> <p>11、Document--li>p</p> <p>12、Document--li>p</p> <p>13、Document--li>p</p> <p>14、Document--li>p</p> </li> </ul> </div> </body> </html>
不太明白的同学,以上栗子要用审核元素好好的看一下。
对于上文章开始的标准说明,我觉得用白话文更好理解一些:
nth-child(n)
和nth-of-type(n)
的匹配范围只作用于同级,即兄弟元素。p:nth-child(n)
中的n值作用于所有兄弟元素,无论是否是p标签。也就是说如果第n位且只有是p标签的时候才起作用。-
p:nth-of-type(n)
中的n值只作用于p标签,忽略非p标签。相当于把所有p标签抽离出来,重新组成序列,然后再应用p:nth-of-type(n)
。 - 如果所有子元素是有且只有相同标签,那么
nth-child(n)
和nth-of-type(n)
效果是一样的。