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