nth-child和nth-of-type的详解及区别

文章2019-07-19107 人已阅来源:网络

在工作中,经常会用到CSS中的选择器,选择器也分为很多种,比如:ID选择器,类选择器,标签选择器,伪类选择器等等,那今天就着重讲讲伪类选择器中的nth-child是什么意思,nth-child怎么使用,以及他与nth-of-type的不同,他们都是CSS3中的伪类选择器,而且很多人认为意思差不多,其实不然,他们还是有区别的,那接下里,就和大家聊聊CSS3nth-of-typenth-child的使用方法,以及他们之间的区别。

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

  • nth-child(n):匹配父元素中的第 n 个子元素,元素类型没有限制。
  • nth-of-type(n):匹配同类型中的第n个同级兄弟元素。
  • n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd)奇数 ,nth-child(even)偶数。

nth-childnth-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>

不太明白的同学,以上栗子要用审核元素好好的看一下。

对于上文章开始的标准说明,我觉得用白话文更好理解一些:

  1. nth-child(n)nth-of-type(n)的匹配范围只作用于同级,即兄弟元素。
  2. p:nth-child(n)中的n值作用于所有兄弟元素,无论是否是p标签。也就是说如果第n位且只有是p标签的时候才起作用。
  3. p:nth-of-type(n)中的n值只作用于p标签,忽略非p标签。相当于把所有p标签抽离出来,重新组成序列,然后再应用p:nth-of-type(n)

  4. 如果所有子元素是有且只有相同标签,那么nth-child(n)nth-of-type(n)效果是一样的。