這篇文章給大家分享的是有關(guān)CSS中nth-child與nth-of-type的元素查找方式有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)為客戶提供專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁設(shè)計(jì)、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、移動(dòng)網(wǎng)站建設(shè)等網(wǎng)站方面業(yè)務(wù)。

nth-child和nth-of-type是css的兩個(gè)偽選擇符。應(yīng)用中，這兩者常常容易混淆。這里把它們拿出來仔細(xì)做個(gè)對(duì)比，看看這兩者是怎么查找元素的。

1. nth-child(n) —— 尋找第n個(gè)子元素

2. nth-of-type(n) —— 尋找同一類型元素里的第n個(gè)元素

看這個(gè)定義也許還不是很清楚他們的區(qū)別，我們一點(diǎn)點(diǎn)來區(qū)分。

p:nth-child(2) 與 p:nth-pf-type(2)

HTML代碼如下

<div>
<div style="float:left;width:200px;">
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
    <p>pgh5</p>
</div>
<div style="float:left;width:200px;">
    <h6>div1</h6>
    <h6>div2</h6>
    <h6>div3</h6>
    <h6>div4</h6>
</div>

分別應(yīng)用兩個(gè)樣式, 都是找第二個(gè)元素

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h6:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

結(jié)果：兩者都應(yīng)用成功。

現(xiàn)在我們對(duì)HTML代碼做點(diǎn)改動(dòng)，讓他們出現(xiàn)一些不同。我們將第一個(gè)p元素和第一個(gè)h6元素改為label，代碼如下：

<div>
<div style="float:left;width:200px;">
    <label>pgh2</label>
    <p>pgh3</p>
    <p>pgh4</p>
    <p>pgh5</p>
</div>
<div style="float:left;width:200px;">
    <label>div1</label>
    <h6>div2</h6>
    <h6>div3</h6>
    <h6>div4</h6>
</div>

樣式不變，這時(shí)再來看效果，發(fā)現(xiàn)nth-of-type(2)結(jié)果變了，這時(shí)高亮的是div3。到這里也算符合我們的邏輯。h6:nth-of-type(2)要找的是第二個(gè)h6類型的元素，也就是div3。

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

HTML如下：

<div>
<div style="float:left;width:200px;">
    <p>pgh2</p>
    <label>pgh3</label>
    <p>pgh4</p>
    <p>pgh5</p>
</div>
<div style="float:left;width:200px;">
    <h6>div1</h6>
    <label>div2</label>
    <h6>div3</h6>
    <h6>div4</h6>
</div>

CSS 不變：

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h6:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

結(jié)果：nth-child沒有效果，nth-of-type高亮的是div3。

為什么會(huì)這樣呢？

1. nth-child 是查找一堆兄弟元素里的第二個(gè)元素，不管那元素是什么，只要它排行老二。這里左側(cè)div找到的是<label>pgh3</label>，右側(cè)div找到的是<label>div2</label>。找到之后，再和前面的選擇符進(jìn)行匹配，如果匹配對(duì)了，那就應(yīng)用樣式。前面的選擇符是p，也就是要求元素是p類型，但這里都是label，不匹配，兩個(gè)元素都不會(huì)應(yīng)用這個(gè)樣式。

2. nth-of-type 是在一堆兄弟元素里找到相同HTML標(biāo)記類型(Markup Type)元素中排行第二的元素。在左側(cè)的div中，<p>pgh4</p>是p類型里排行第二的元素；在右側(cè)的div中，<h6>div3</h6>是h6類型里排行第二的元素。找到之后，再和前面的選擇符進(jìn)行匹配，如果匹配對(duì)了，那就應(yīng)用樣式。前面的選擇符是h6, 那么只有右側(cè)div的<h6>div3</h6>元素應(yīng)用了樣式，左側(cè)div的<p>pgh4</p>則不會(huì)。

所以，nth-child和nth-of-type的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個(gè)絕對(duì)位置的元素，后者是查找同類型元素中某個(gè)絕對(duì)位置的元素。相同之處是，兩者都是找到元素之后再與前面的選擇符進(jìn)行匹配，這里的匹配方式是一樣的。

稍微往下延伸，清楚了查找方式，那么不管前面的選擇符怎么變，最后都是先查找到元素再與前面的選擇符進(jìn)行匹配。也就是說選擇符與他們的查找方式?jīng)]有關(guān)系。弄清楚這個(gè)就不會(huì)被不同的組合混淆了。

1. p:nth-child(2) 正確：查找第二個(gè)元素，且這個(gè)元素是p。錯(cuò)誤：查找第二個(gè)為p的元素

2. .info:nth-child(2) 正確：查找第二個(gè)元素，且這個(gè)元素的class包含"info"。錯(cuò)誤：查找第二個(gè)class包含"info"的元素。

3. p:nth-of-type(2) 查找相同HTML標(biāo)記類型中排行第二的元素，且這個(gè)元素是p（或者直觀的說查找第二個(gè)p類型元素）

4. .info:nth-of-type(2) 查找相同HTML標(biāo)記類型中排行第二的元素，且這個(gè)元素的class包含"info"

感謝各位的閱讀！關(guān)于“CSS中nth-child與nth-of-type的元素查找方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：CSS中nth-child與nth-of-type的元素查找方式有哪些
本文地址：http://jinyejixie.com/article16/ghhsdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、、云服務(wù)器、App開發(fā)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)