nth-of-type與nth-child的區別

　　　　　　　　某個元素:nth-of-type(n)這個CSS 偽類是針對具有一組兄弟節點的標籤, 用 n 來篩選出在一組兄弟節點的位置。選擇器選取父元素的第 n 個指定型別的子元素。

　　　　　　　　某個元素:nth-child(n)這個CSS 偽類首先找到所有當前元素的兄弟元素，, 用 n 來篩選出在當前元素的兄弟元素節點的位置。該選擇器選取父元素的第n 個子元素，不論元素的型別。

　　　　　　　　我們可以注意到:nth-of-type他是當前元素的兄弟元素的第n個，而nth-child是當前元素的兄弟節點的第n個當前元素。

　　　　　　　　:nth-child()表示父元素下的第n個子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素則沒有匹配的元素 　:nth-of-type()表示父元素下的第ｎ個型別的元素　比如div p:nth-of-type(2)表示div下的第二個ｐ元素。

　　　　　　總結：

　　　　　　　　1.nth-child：按照個數來算。

　　　　　　　　nth-of-type：按照型別來計算，如果是class那麼碰到不同型別的，單獨一類，符合條件的選中。

　　　　　　　　2.在不指定型別時，nth-child(n)選中的是父元素下的第N個子元素。nth-of-type(n)選中的是父元素下的不同型別標籤的第N個。

　　　　　　　　3.ele:nth-child(n)要求不僅僅是第n個子元素，並且這個子元素的標籤是ele。ele:nth-of-type(n)選擇的是父元素下ele標籤的第二個

　　　　　　　　4。ele:last-child選中父元素下最後一個子元素，並且該子元素的標籤必須為ele，否則一個都不選中。ele:last-of-type選中父元素下ele標籤的最後一個.