nth-of-type與nth-child的區別，對于初學者來說是一個比較頭疼的問題，也是一個初級前端常見的面試題，那么nth-of-type與nth-child有什么區別呢？下面帶你徹底弄懂它們之間的區別。

:nth-of-type() CSS 偽類   匹配同類型中的第n個同級兄弟元素。

:nth-of-type(n)：n可以是一個數字，一個關鍵字，或者一個公式。

數字，我就不多說了，注意是從1開始的哦（不是從0）

關鍵字：可選的有：odd（奇數）、even（偶數）

#wrap p:nth-of-type(even) {
            background: red;
        }

此時，背景變為紅色的就是two、four、six啦

公式：使用公式（an+ b）.描述：a代表一個循環的大小，N是一個計數器（從0開始），以及b是偏移量。

怎么理解吶？

比如像上面的想要讓偶數p變為紅色背景，那么用公式就是：

#wrap p:nth-of-type(2n) {
            background: red;
        }

效果和上面的一樣。

個人還是比較喜歡用公式的，功能真的很強大，比如我們想要讓奇數的變紅公式就是2n+1嘍，想要讓3的倍數的變紅，公式就是3n啦，依次類推。

哦，說說一下，兼容性

嗯、其實整理完，也很簡單啦，希望看完的你也有這樣的感覺。

MDN上的概念：

某個元素:nth-of-type(n)這個CSS 偽類是針對具有一組兄弟節點的標簽, 用 n 來篩選出在一組兄弟節點的位置。

某個元素:nth-child(n)這個CSS 偽類首先找到所有當前元素的兄弟元素，, 用 n 來篩選出在當前元素的兄弟元素節點的位置。

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

我們可以舉個例子，來弄懂他們之間的區別

這是p:nth-child(4) ，他取到了p標簽的第4個

這是p:nth-of-type(4)，他也取到了p標簽的第4個

但如果我們在 第二個與第三個之間加個h1呢，結果p:nth-of-type(4)取到了p元素的第四個，但是p:nth-child(4)取到的是p元素的第三個，這下我們就可以搞懂啦！

因為nth-of-type他是當前元素的兄弟元素的第n個，而nth-child是當前元素的兄弟節點的第n個當前元素，所以p:nth-of-type(4)是第四個p元素，只能是p元素的第四個，即 當前元素:nth-of-type無論中間加入什么元素，都只能是當前元素的第n個，而p:nth-child(4)是取第四個兄弟節點的p元素，所以我們發現第三個p被p:nth-child(4)取到啦。當p:nth-child(4)的第四個兄弟節點不是p元素的話，會怎么樣呢？

我們可以看到，就取不到p:nth-child(4)了。

總結：

nth-of-type是取當前元素的兄弟元素的第n個，nth-child取的是當前元素的第n個節點的當前元素

• nth-child
  按照個數來算。

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

• nth-of-type
• nth-child