此篇的由來(lái)

nth-child(n)與nth-of-type(n)好像在平時(shí)使用中并沒(méi)有太大的區(qū)別，至少我之前是這么想的，直到有一次……

用法與區(qū)別

其實(shí)這兩個(gè)選擇器的日常的使用也不是很頻繁，但是有的時(shí)候的確很好用。
不如正題：
仔細(xì)看下定義就知道兩者的區(qū)別了

• nth-child(n)

  :nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類(lèi)型

• nth-of-type(n)

  :nth-of-type(n) 選擇器匹配屬于父元素的特定類(lèi)型的第 N 個(gè)子元素的每個(gè)元素

其實(shí)看到這個(gè)地方大致就差多了理解了，一個(gè)是分類(lèi)篩選子集，另一個(gè)則不是
下面通過(guò)具體得例子說(shuō)明兩者的區(qū)別

<!-- html結(jié)構(gòu) -->
<div class="demo">
  <div>這是第一個(gè)div</div>
  <div>這是第二個(gè)div</div>
  <div>這是第三個(gè)div</div>
  <h5>這是第一個(gè)h5</h5>
  <h5>這是第二個(gè)h5</h5>
  <h5>這是第三個(gè)h5</h5>
  <p>這是第一個(gè)p</p>
  <p>這是第二個(gè)p</p>
  <p>這是第三個(gè)p</p>
</div>

1.均不采用限制元素

/* 均不采用限定元素 */
/* 設(shè)置紅色背景 */
.demo :nth-child(3) {
  background: #f00;
}
/* 設(shè)置綠色背景 */
.demo :nth-of-type(2) {
  background: #0ff;
}

具體頁(yè)面效果如下圖

注意兩者的前面都沒(méi)有加限制元素，所以?xún)蓚€(gè)表達(dá)的意思分別是：
.demo :nth-child(3)：選擇demo類(lèi)的第3個(gè)子元素
.demo :nth-of-type(2)：選擇demo類(lèi)中每個(gè)元素類(lèi)型的第二個(gè)元素，所以第二個(gè)div，第二個(gè)h5，第二個(gè)p都會(huì)被選中

2.采用限制元素

/* 均不采用限定元素 */
/* 設(shè)置紅色背景 */
.demo p:nth-child(3) {
  background: #f00;
}
/* 設(shè)置綠色背景 */
.demo p:nth-of-type(2) {
  background: #0ff;
}

具體頁(yè)面效果如下圖

現(xiàn)在的情況就有意思了，來(lái)看下具體的原因：
.demo p:nth-child(3)：選擇demo類(lèi)的p元素且其是第3個(gè)子元素，很顯然不存在這樣的元素，所以選擇失敗，自然也就沒(méi)有元素節(jié)點(diǎn)的背景色被設(shè)置成紅色
.demo? p:nth-of-type(2)：選擇demo類(lèi)中的第2個(gè)p元素

總結(jié)

ele:nth-child(n)選擇器簡(jiǎn)單的理解就是：
是指定的ele類(lèi)型同時(shí)還是第n個(gè)子元素，滿(mǎn)足這兩個(gè)條件就可以選擇到，否則就無(wú)法選擇

ele:nth-of-type(n)選擇器簡(jiǎn)單的理解就是：
選擇父元素的第n個(gè)指定元素ele類(lèi)型的子元素

// 來(lái)源于網(wǎng)友的解釋?zhuān)赡軙?huì)更方便理解
篩選出id為a的div里的所有直接子元素ele，然后在篩選出的結(jié)果里，只選擇第n個(gè)ele，該ele的子元素均受其影響。

有的時(shí)候，關(guān)于文字的表述的確會(huì)存在一些拗口的地方，因此建議多動(dòng)手謝謝demo就一目了然了！

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)標(biāo)明出處。