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

nth-child会把所有的盒子都排序，执行的时候先执行nth-child，再看前面的元素

假如有如下代码

HTML：

<section>
	<p></p>
	<div></div>
	<div></div>
</section>

CSS：

section div:nth-child(1) {
	backgroud-color: #333;
}

此时并不会有任意一个元素背景颜色变为#333，因为此时系统先对section中的三个元素进行排序，第一个为p，第二第三为div，代码往后运行发现第一个是p，而不是选择器中所写的div，便不执行bgc样式。

nth-of-type执行时会先识别前面的元素，再进行排序

同样的html代码，若将css写成如下形式：

section div:nth-of-type(1) {
	background-color: #333;
}

此时第一个div的背景颜色会变成#333，因为此时代码执行顺序是先筛选出section中的div，然后再进行排序，识别到第一个div后，对元素样式进行改变