詳解CSS nth-child與nth-of-type的元素查找方式

nth-child和nth-of-type是css的兩個偽選擇符。應(yīng)用中,這兩者常常容易混淆。這里把它們拿出來仔細做個對比,看看這兩者是怎么查找元素的。
- nth-child(n) —— 尋找第n個子元素
- nth-of-type(n) —— 尋找同一類型元素里的第n個元素
看這個定義也許還不是很清楚他們的區(qū)別,我們一點點來區(qū)分。
p:nth-child(2) 與 p:nth-pf-type(2)
HTML代碼如下
<div> <div style="float:left;width:200px;"> <p>pgh1</p> <p>pgh2</p> <p>pgh3</p> <p>pgh4</p> </div> <div style="float:left;width:200px;"> <h5>div1</h5> <h5>div2</h5> <h5>div3</h5> <h5>div4</h5> </div>
分別應(yīng)用兩個樣式, 都是找第二個元素
p:nth-child(2) { color: red; font-weight:bold; } h5:nth-of-type(2) { color: blue; font-weight:bold; }
結(jié)果:兩者都應(yīng)用成功。
現(xiàn)在我們對HTML代碼做點改動,讓他們出現(xiàn)一些不同。我們將第一個p元素和第一個h5元素改為label,代碼如下:
<div> <div style="float:left;width:200px;"> <label>pgh1</label> <p>pgh2</p> <p>pgh3</p> <p>pgh4</p> </div> <div style="float:left;width:200px;"> <label>div1</label> <h5>div2</h5> <h5>div3</h5> <h5>div4</h5> </div>
樣式不變,這時再來看效果,發(fā)現(xiàn)nth-of-type(2)結(jié)果變了,這時高亮的是div3。到這里也算符合我們的邏輯。h5:nth-of-type(2)要找的是第二個h5類型的元素,也就是div3。
繼續(xù)改動HTML代碼。我們恢復(fù)第一個p元素和第一個h5元素,將第二個p元素和第二個h5元素改為label,樣式仍保持不變,結(jié)果會怎樣呢?
HTML如下:
<div> <div style="float:left;width:200px;"> <p>pgh1</p> <label>pgh2</label> <p>pgh3</p> <p>pgh4</p> </div> <div style="float:left;width:200px;"> <h5>div1</h5> <label>div2</label> <h5>div3</h5> <h5>div4</h5> </div>
CSS 不變:
p:nth-child(2) { color: red; font-weight:bold; } h5:nth-of-type(2) { color: blue; font-weight:bold; }
結(jié)果:nth-child沒有效果,nth-of-type高亮的是div3。
為什么會這樣呢?
- nth-child 是查找一堆兄弟元素里的第二個元素,不管那元素是什么,只要它排行老二。這里左側(cè)div找到的是<label>pgh2</label>,右側(cè)div找到的是<label>div2</label>。找到之后,再和前面的選擇符進行匹配,如果匹配對了,那就應(yīng)用樣式。前面的選擇符是p,也就是要求元素是p類型,但這里都是label,不匹配,兩個元素都不會應(yīng)用這個樣式。
- nth-of-type 是在一堆兄弟元素里找到相同HTML標記類型(Markup Type)元素中排行第二的元素。在左側(cè)的div中,<p>pgh3</p>是p類型里排行第二的元素;在右側(cè)的div中,<h5>div3</h5>是h5類型里排行第二的元素。找到之后,再和前面的選擇符進行匹配,如果匹配對了,那就應(yīng)用樣式。前面的選擇符是h5, 那么只有右側(cè)div的<h5>div3</h5>元素應(yīng)用了樣式,左側(cè)div的<p>pgh3</p>則不會。
所以,nth-child和nth-of-type的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素,后者是查找同類型元素中某個絕對位置的元素。相同之處是,兩者都是找到元素之后再與前面的選擇符進行匹配,這里的匹配方式是一樣的。
稍微往下延伸,清楚了查找方式,那么不管前面的選擇符怎么變,最后都是先查找到元素再與前面的選擇符進行匹配。也就是說選擇符與他們的查找方式?jīng)]有關(guān)系。弄清楚這個就不會被不同的組合混淆了。
- p:nth-child(2) 正確:查找第二個元素,且這個元素是p。錯誤:查找第二個為p的元素
- .info:nth-child(2) 正確:查找第二個元素,且這個元素的class包含"info"。錯誤:查找第二個class包含"info"的元素。
- p:nth-of-type(2) 查找相同HTML標記類型中排行第二的元素,且這個元素是p(或者直觀的說查找第二個p類型元素)
- .info:nth-of-type(2) 查找相同HTML標記類型中排行第二的元素,且這個元素的class包含"info"
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用css屬性:nth-child(n)匹配選擇第n個子元素
css匹配選擇第n個子元素可以使用:nth-child(n) 選擇器,其匹配屬于其父元素的第N個子元素,不論元素的類型2014-07-29css :nth-child與:nth-of-type之小解
css :nth-child與:nth-of-type之小解,需要的朋友可以參考下。2011-10-07- nth-child 選擇器 選擇指定選擇器的父元素下的 指定選擇器元素,這篇文章主要介紹了CSS中nth-child 的使用示例教程,需要的朋友可以參考下2023-06-26