nth-of-type與nth-child的區(qū)別，對(duì)于初學(xué)者來(lái)說(shuō)是一個(gè)比較頭疼的問(wèn)題，也是一個(gè)初級(jí)前端常見(jiàn)的面試題，那么nth-of-type與nth-child有什么區(qū)別呢？下面帶你徹底弄懂它們之間的區(qū)別。

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

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

數(shù)字，我就不多說(shuō)了，注意是從1開(kāi)始的哦（不是從0）

關(guān)鍵字：可選的有：odd（奇數(shù)）、even（偶數(shù)）

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

此時(shí)，背景變?yōu)榧t色的就是two、four、six啦

公式：使用公式（an+ b）.描述：a代表一個(gè)循環(huán)的大小，N是一個(gè)計(jì)數(shù)器（從0開(kāi)始），以及b是偏移量。

怎么理解吶？

比如像上面的想要讓偶數(shù)p變?yōu)榧t色背景，那么用公式就是：

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

效果和上面的一樣。

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

哦，說(shuō)說(shuō)一下，兼容性

嗯、其實(shí)整理完，也很簡(jiǎn)單啦，希望看完的你也有這樣的感覺(jué)。

MDN上的概念：

某個(gè)元素:nth-of-type(n)這個(gè)CSS 偽類是針對(duì)具有一組兄弟節(jié)點(diǎn)的標(biāo)簽, 用 n 來(lái)篩選出在一組兄弟節(jié)點(diǎn)的位置。

某個(gè)元素:nth-child(n)這個(gè)CSS 偽類首先找到所有當(dāng)前元素的兄弟元素，, 用 n 來(lái)篩選出在當(dāng)前元素的兄弟元素節(jié)點(diǎn)的位置。

我們可以注意到:nth-of-type他是當(dāng)前元素的兄弟元素的第n個(gè)，而nth-child是當(dāng)前元素的兄弟節(jié)點(diǎn)的第n個(gè)當(dāng)前元素。

我們可以舉個(gè)例子，來(lái)弄懂他們之間的區(qū)別

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

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

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

因?yàn)?span style="font-weight: 600; font-synthesis: style;">nth-of-type他是當(dāng)前元素的兄弟元素的第n個(gè)，而nth-child是當(dāng)前元素的兄弟節(jié)點(diǎn)的第n個(gè)當(dāng)前元素，所以p:nth-of-type(4)是第四個(gè)p元素，只能是p元素的第四個(gè)，即 當(dāng)前元素:nth-of-type無(wú)論中間加入什么元素，都只能是當(dāng)前元素的第n個(gè)，而p:nth-child(4)是取第四個(gè)兄弟節(jié)點(diǎn)的p元素，所以我們發(fā)現(xiàn)第三個(gè)p被p:nth-child(4)取到啦。當(dāng)p:nth-child(4)的第四個(gè)兄弟節(jié)點(diǎn)不是p元素的話，會(huì)怎么樣呢？

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

總結(jié)：

nth-of-type是取當(dāng)前元素的兄弟元素的第n個(gè)，nth-child取的是當(dāng)前元素的第n個(gè)節(jié)點(diǎn)的當(dāng)前元素

• nth-child
  按照個(gè)數(shù)來(lái)算。

• nth-of-type
  按照類型來(lái)計(jì)算，如果是class那么碰到不同類型的，單獨(dú)一類，符合條件的選中。

• nth-child
• nth-of-type