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

 

🎜🎜🎜🎜🎜🎜 🎜}🎜🎜🎜🎜 🎜🎜