溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3偽類選擇器nth-of-type和nth-child的用法以及區(qū)別是什么

發(fā)布時間：2020-09-10 11:35:31 來源：億速云 閱讀：135 作者：小新 欄目：web開發(fā)

這篇文章主要介紹CSS3偽類選擇器nth-of-type和nth-child的用法以及區(qū)別是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在工作中，經(jīng)常會用到CSS中的選擇器，選擇器也分為很多種，比如：ID選擇器，類選擇器，標(biāo)簽選擇器，偽類選擇器等等，那今天就著重講講偽類選擇器中的nth-child是什么意思，nth-child怎么使用，以及他與nth-of-type的不同，他們都是CSS3中的偽類選擇器，而且很多人認(rèn)為意思差不多，其實(shí)不然，他們還是有區(qū)別的，那接下里，就和大家聊聊CSS3 nth-of-type和nth-child的使用方法，以及他們之間的區(qū)別。

一、nth-child( ) 與 nth-of-type( )的定義與用法

nth-child(n) : 匹配父元素中的第 n 個子元素，元素類型沒有限制。
nth-of-type(n) : 匹配同類型中的第n個同級兄弟元素。
n可以是一個數(shù)字，一個關(guān)鍵字，或者一個公式，比如：nth-child(odd) 奇數(shù) ,nth-child(even) 偶數(shù)。

nth-child和nth-of-type的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素，后者是查找同類型元素中某個絕對位置的元素。相同之處是，兩者都是找到元素之后再與前面的選擇符進(jìn)行匹配，這里的匹配方式是一樣的。
稍微往下延伸，清楚了查找方式，那么不管前面的選擇符怎么變，最后都是先查找到元素再與前面的選擇符進(jìn)行匹配。也就是說選擇符與他們的查找方式?jīng)]有關(guān)系。弄清楚這個就不會被不同的組合混淆了。

看這個定義也許還不是很清楚他們的區(qū)別，接下來我們通過代碼和圖片來一點(diǎn)點(diǎn)來區(qū)分。

二、舉例說明 nth-of-type和nth-child的區(qū)別

1、給第一個div五個P標(biāo)簽，給第二個div五個H5標(biāo)簽，分別用nth-child(2)與nth-of-type(2),看看結(jié)果是不是一樣的，都是第二個變色。

<style type="text/css">
   p:nth-child(2){color: red ;}
   h6:nth-of-type(2){color: blue;}
 </style>
 <body>
  <div>
   <p>星期一</p>
   <p>星期二</p>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h6>段落一</h6>
   <h6>段落二</h6>
   <h6>段落三</h6>
   <h6>段落四</h6>
   <h6>段落五</h6>   
  </div>
 </body>

效果圖：

CSS3偽類選擇器nth-of-type和nth-child的用法以及區(qū)別是什么

2、現(xiàn)在我們對HTML代碼做點(diǎn)改動，讓他們出現(xiàn)一些不同，CSS樣式不變。我們將第一個p元素和第一個h6元素改為h5，代碼如下：

<div>
   <h5>星期一</h5>
   <p>星期二</p>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h5>段落一</h5>
   <h6>段落二</h6>
   <h6>段落三</h6>
   <h6>段落四</h6>
   <h6>段落五</h6>   
  </div>

效果圖：

CSS3偽類選擇器nth-of-type和nth-child的用法以及區(qū)別是什么

看看，現(xiàn)在是不是發(fā)現(xiàn)nth-of-type(2)結(jié)果變了，段落3變色了。h6:nth-of-type(2)要找的是第二個h6類型的元素，也就是段落3。

3、繼續(xù)改動HTML代碼。我們恢復(fù)第一個p元素和第一個h6元素，將第二個p元素和第二個h6元素改為h5，樣式仍保持不變，結(jié)果會怎樣呢？

<div>
   <p>星期一</p>
   <h5>星期二</h5>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h6>段落一</h6>
   <h5>段落二</h5>
   <h6>段落三</h6>
   <h6>段落四</h6>
   <h6>段落五</h6>   
  </div>

效果圖：

CSS3偽類選擇器nth-of-type和nth-child的用法以及區(qū)別是什么

結(jié)果可以看到nth-child沒有效果，nth-of-type高亮的是段落3。

為什么會這樣？

nth-child 是查找一堆兄弟元素里的第二個元素，不管那元素是什么，只要它排行第二就行。這里前一個div找到的是 <h5>星期二</h5>
，后一個div找到的是<h5>段落二</h5>。找到之后，再和前面的選擇符進(jìn)行匹配，如果匹配對了，那就應(yīng)用樣式。前面的選擇符是p，也就是要求元素是p類型，但這里都是h5，不匹配，兩個元素都不會應(yīng)用這個樣式。

nth-of-type 是在一堆兄弟元素里找到相同HTML標(biāo)記類型元素中排行第二的元素。在第一個div中 <p>星期三</p>是p類型里排行第二的元素；在后一個div中<h6>段落三</h6>是h6類型里排行第二的元素。找到之后，再和前面的選擇符進(jìn)行匹配，如果匹配對了，那就應(yīng)用樣式。前面的選擇符是h6, 那么只有后一個div中<h6>段落三</h6>元素應(yīng)用了樣式，前一個div的<h5>星期二</h5>則不會。

以上是CSS3偽類選擇器nth-of-type和nth-child的用法以及區(qū)別是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手