【CSS】nth-child 與 nth-of-type 的元素查找方式

時間 2019-12-10

標籤 CSS nth child type 元素查找方式欄目 CSS 简体版

原文原文鏈接

nth-child和nth-of-type是css的兩個僞選擇符。應用中，這二者經常容易混淆。這裏把它們拿出來仔細作個對比，看看這二者是怎麼查找元素的。css

nth-child(n) —— 尋找第n個子元素
nth-of-type(n) —— 尋找同一類型元素裏的第n個元素html

看這個定義也許還不是很清楚他們的區別，咱們一點點來區分。spa

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

HTML代碼以下code

<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>

分別應用兩個樣式, 都是找第二個元素htm

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

結果：二者都應用成功。ip

如今咱們對HTML代碼作點改動，讓他們出現一些不一樣。咱們將第一個p元素和第一個h5元素改成label，代碼以下：it

<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>

樣式不變，這時再來看效果，發現nth-of-type(2)結果變了，這時高亮的是div3。到這裏也算符合咱們的邏輯。h5:nth-of-type(2)要找的是第二個h5類型的元素，也就是div3。class

繼續改動HTML代碼。咱們恢復第一個p元素和第一個h5元素，將第二個p元素和第二個h5元素改成label，樣式仍保持不變，結果會怎樣呢？
HTML以下：cli

<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 不變：float

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

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

爲何會這樣呢？

nth-child 是查找一堆兄弟元素裏的第二個元素，無論那元素是什麼，只要它排行老二。這裏左側div找到的是<label>pgh2</label>，右側div找到的是<label>div2</label>。找到以後，再和前面的選擇符進行匹配，若是匹配對了，那就應用樣式。前面的選擇符是p，也就是要求元素是p類型，但這裏都是label，不匹配，兩個元素都不會應用這個樣式。
nth-of-type 是在一堆兄弟元素裏找到相同HTML標記類型(Markup Type)元素中排行第二的元素。在左側的div中，<p>pgh3</p>是p類型裏排行第二的元素；在右側的div中，<h5>div3</h5>是h5類型裏排行第二的元素。找到以後，再和前面的選擇符進行匹配，若是匹配對了，那就應用樣式。前面的選擇符是h5, 那麼只有右側div的<h5>div3</h5>元素應用了樣式，左側div的<p>pgh3</p>則不會。

因此，nth-child和nth-of-type的不一樣之處就是查找元素的方式不一樣。前者是查找兄弟元素中某個絕對位置的元素，後者是查找同類型元素中某個絕對位置的元素。相同之處是，二者都是找到元素以後再與前面的選擇符進行匹配，這裏的匹配方式是同樣的。

稍微往下延伸，清楚了查找方式，那麼無論前面的選擇符怎麼變，最後都是先查找到元素再與前面的選擇符進行匹配。也就是說選擇符與他們的查找方式沒有關係。弄清楚這個就不會被不一樣的組合混淆了。