CSS3中nth-of-type和nth-child选择器区别分析和理解

第一层

按照网上的理解，p:nth-of-type(2)表示选择第二个p标签，而p:nth-child(2)表示选择一个p标签并且这个标签是父元素的第二个子元素。p:nth-of-type(2)表示子元素中的第二个p标签。

    
标签1
	
标签2
	
标签3
	
标签4
	

	

 运行结果：

    
标签2
	
标签2
	
标签3
	
标签4
	

	

 运行结果：

这两次的运行结果是一样的，都表示第二个p标签。如果在p:nth-child(2)的例子中在第二个p标签之前加上一个标签，结果是：

可以看出，p:nth-child(2)表示的是一个p标签且是第二个子元素。而对于p:nth-of-type(2)无论中间加了多少span标签，都是第二个p标签被选择，

 所以，p:nth-of-type(2)表示子元素中的第二个p标签。

第二层

不仅仅是只有p标签或者span标签

例如，在div标签内，存在p标签

	

		
标签1
		
标签2
	
	
		
标签3
		
标签4
	
	
p标签
		
标签5
		
标签6
		
	


	

结果是：

 

选择的是第二个，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

	

		
标签1
		
标签2
	
	
		
标签3
		
标签4
	
	
p标签
		
标签5
		
标签6
		
	


	

结果是：

运行 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选择器哦）。暂时对这两个属性的理解和分析。如果有人看到不对的地方，还望理解。

如果后面发现不对，会修改