此篇的由來
nth-child(n)與nth-of-type(n)好像在平時(shí)使用中并沒有太大的區(qū)別匹表，至少我之前是這么想的操软，直到有一次……
用法與區(qū)別
其實(shí)這兩個(gè)選擇器的日常的使用也不是很頻繁殊鞭，但是有的時(shí)候的確很好用膘流。
不如正題：
仔細(xì)看下定義就知道兩者的區(qū)別了
-
nth-child(n)
:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型
-
nth-of-type(n)
:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素
其實(shí)看到這個(gè)地方大致就差多了理解了膀曾，一個(gè)是分類篩選子集抵知，另一個(gè)則不是
下面通過具體得例子說明兩者的區(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;
}
具體頁面效果如下圖
注意兩者的前面都沒有加限制元素墙基，所以兩個(gè)表達(dá)的意思分別是：
.demo :nth-child(3)：選擇demo類的第3個(gè)子元素
.demo :nth-of-type(2)：選擇demo類中每個(gè)元素類型的第二個(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;
}
具體頁面效果如下圖
現(xiàn)在的情況就有意思了，來看下具體的原因：
.demo p:nth-child(3)：選擇demo類的p元素且其是第3個(gè)子元素吱肌，很顯然不存在這樣的元素痘拆，所以選擇失敗，自然也就沒有元素節(jié)點(diǎn)的背景色被設(shè)置成紅色
.demo? p:nth-of-type(2)：選擇demo類中的第2個(gè)p元素
總結(jié)
ele:nth-child(n)選擇器簡單的理解就是：
是指定的ele類型同時(shí)還是第n個(gè)子元素氮墨，滿足這兩個(gè)條件就可以選擇到纺蛆，否則就無法選擇
ele:nth-of-type(n)選擇器簡單的理解就是：
選擇父元素的第n個(gè)指定元素ele類型的子元素
// 來源于網(wǎng)友的解釋，可能會(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)明出處。
