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

文章2019-07-19730 人已阅来源：网络

在工作中，经常会用到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>

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

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

  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)效果是一样的。

相关内容

浏览更多有关 的内容