深入理解 nth-child 和 nth-of-type 的區別

• 2020 年 6 月 16 日
• 筆記
• CSS

ele:nth-of-type(n)  為什麼叫 of-type ,就是說它是以「type」來區分的，也就是說ele:nth-of-type(n)指的是父元素下第n個ele元素。

ele:nth-child(n)      指的是父元素下第n個元素且這個元素是ele，若沒有，則選擇失敗。

舉例：

<style>
.div-parent span:nth-child(2){
color:red;
}
.div-parent span:nth-of-type(2){
color:yellow;
}
</style>

<div class="div-parent">
    <p>這是段落P</p>
    <span>這是span1</span>
    <span>這是span2</span>
</div>

結果為：

這是段落P

這是span1 這是span2

說明：

span:nth-child(2)   選擇的是所有子元素中的第二個元素，這個元素必須是span 

span:nth-of-type(2)  選擇的是所有的span子元素中的第二個元素。

如果在nth-child 和 nth-of-type前不指定標籤呢？

舉例：

<style>
.div-parent :nth-child(2){
color:red;
}
.div-parent :nth-of-type(2){
color:yellow;
}
</style>

<div class="div-parent">
    <p>這是段落P1</p>
    <span>這是span1</span>
    <span>這是span2</span>
    <p>這是段落P2</p>
</div>

結果為：

這是段落P1

這是span1 這是span2

這是段落P2

說明：

:nth-child(2)   不管是否指定標籤，:nth-child(2)選擇的都是第二個子元素，只不過如果指定了標籤，那第二個元素就必須是該標籤元素，否則選擇失敗。

:nth-of-type(2)  它選中了兩個元素，分別是父級.div-parent 下第二個p標籤和第二個span標籤，說明，:nth-of-type(2) 選擇的是各個子類型標籤的第二個元素。

最後，我們了解一下，:nth-child(n) 和 :nth-of-type(n) 括號中的n代表什麼?

說明：

上述選擇器中的n，可以是數字，關鍵字和公式

①  數字：前面舉例已經說明了， 1就是第一個  、2就是第二個

② 關鍵字： odd 和 even 匹配下標是奇數或偶數的子元素關鍵字，第一個子元素下標是1，那odd就是第1，3，5，7…個子元素

③ 公式：就是一種算數表達式，表示周期，n是從0開始計數

比如  2n，就是下標是2的倍數的子元素，其實就等同於even

比如n+2，就是下標不小於2的子元素，其實就是第2，3，4，5，6…個

特別說明下面這個例子：

<style>
.div-parent .item:nth-of-type(2){
color:yellow;
}
</style>

<div class="div-parent">
    <p>這是段落P1</p>
    <span>這是span1</span>
    <span class="item">這是span2</span>
</div>

結果：

這是段落P1

這是span1 這是span2

說明：

.item:nth-of-type(2) ，指的是span2，就等同於   span:nth-of-type(2)。而 .item:nth-of-type(1)是無效的，選擇失敗。因為span1，沒有這個類.item

所以說，如果 :nth-of-type(2) 前指定的元素是類，選擇的是指定類對應的標籤下的第二個元素，且這個元素的類是指定類。