第一层
按照网上的理解，p:nth-of-type(2)表示选择第二个p标签，而p:nth-child(2)表示选择一个p标签并且这个标签是父元素的第二个子元素。p:nth-of-type(2)表示子元素中的第二个p标签。
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
p:nth-of-type(2){
color:red;
}
</style>
<body>
<p>标签1</p>
<p>标签2</p>
<p>标签3</p>
<p>标签4</p>
</body>
</html>运行结果：
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
p:nth-child(2){
color:red;
}
</style>
<body>
<p>标签2</p>
<p>标签2</p>
<p>标签3</p>
<p>标签4</p>
</body>
</html>运行结果：
这两次的运行结果是一样的，都表示第二个p标签。如果在p:nth-child(2)的例子中在第二个p标签之前加上一个<span>标签，结果是：
可以看出，p:nth-child(2)表示的是一个p标签且是第二个子元素。而对于p:nth-of-type(2)无论中间加了多少span标签，都是第二个p标签被选择，
所以，p:nth-of-type(2)表示子元素中的第二个p标签。
第二层
不仅仅是只有p标签或者span标签
例如，在div标签内，存在p标签
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
p:nth-of-type(2){
color:red;
}
</style>
<body>
<div>
<p>标签1</p>
<p>标签2</p>
</div>
<span>
<p>标签3</p>
<p>标签4</p>
</span>
<p>p标签
<p>标签5</p>
<p>标签6</p>
</p>
</body>
</html>结果是：
选择的是第二个，div区域和span区域内的第二个p标签都被选择了，如果是p:nth-of-type(3)，
结果是：
如果是 p:nth-of-type(4)，p:nth-of-type(5)，结果都是
结果表明，如果使用 p:nth-of-type，且在像div这样的区域内有p标签，那么div也是父类，不管有多少div，都与body中的p标签平行存在，都相对于被选择。但是对于p标签中 的p标签，则不会分子类，会按照顺序进行选择。并且和第一层一样，是选择子元素的第二个p标签。（div区域内的第二个p标签或者body中的第二个p标签）
另外：对于p:nth-child
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
p:nth-child(2){
color:red;
}
</style>
<body>
<div>
<p>标签1</p>
<p>标签2</p>
</div>
<span>
<p>标签3</p>
<p>标签4</p>
</span>
<p>p标签
<p>标签5</p>
<p>标签6</p>
</p>
</body>
</html>结果是：
运行 p:nth-child(3)的结果
运行 p:nth-child(4)的结果，运行 p:nth-child(5)的结果分别是
可以发现， 像div这样的标签内的p标签也是相当于子元素，div相当于父元素。但不是像p:nth-of-type(2)那样平行存在且都是父元素的，比如当用到p:nth-child(2)的时候，是选择第二个元素，如果他是p标签，就选择，不是就不选择。根据上面的运行结果可知，div相当于一个子元素，span相当于一个子元素，外层的p标签和p标签内的p标签都相当于一个子元素相当于一个子元素，所以p:nth-child(2)不会选择到外层p标签包裹的p标签。
但是外层p标签和他包裹的p标签会和p:nth-of-type一样，被按照顺序选择，而且会和第一层说明的一样，样式是 p:nth-child(5)，如果第五个元素不是p标签，则不会被选择，示例如下:
在标签6前面没有没有加span时，标签6时第五个子元素，加上之后变成第六个子元素
刚入门，小白（刚看到CSS选择器哦）。暂时对这两个属性的理解和分析。如果有人看到不对的地方，还望理解。
如果后面发现不对，会修改