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

:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 

例：

 

　  

1

 

　　

1

 

　　

2

 

 

 

.box p:nth-child(1){

　　color:red;  //选择失败，因为.box下面的第一个子元素不是p

}

.box p:nth-child(2){

　　color:red;  //选择的元素是

1

 

}

.box p:nth-child(3){

　　color:red;  //选择的元素是

2

 

}

.box p:nth-of-type(1){

　　color:red;  //选择的元素是

1

 

}