CSS nth-of-type和nth-child的差別是什麼？

區別：兩個匹配的元素不同，「:nth-of-type(n)」選擇器是匹配屬於父元素的特定類型的第N個子元素，元素類型是有限制的；而「:nth-child(n)」選擇器是符合屬於其父元素的第N個子元素，元素類型是沒有限制的。

（推薦教學：CSS影片教學）

1、:nth-child() 選擇器

:nth-child(n) 選擇器符合屬於其父元素的第N 個子元素，不論元素的類型，n 可以是數字、關鍵字或公式。

2、:nth-of-type(n)
:nth-of-type(n)選擇器符合屬於父元素的特定型別的第N個子元素，元素類型沒有限制；n可以是數字、關鍵字或公式。

3、具體區別

先看程式碼

p:nth-of-type (7) 所選的p元素所在的父元素下的第7個P元素即：<p>第7個p</p>

1. # p:nth-child(6) 所選的p元素所在的父元素下的第6個子元素，且該元素是P元素即：

   第5個p

結果

2. #4、odd 和even 是可用來匹配下標是奇數或偶數的子元素的關鍵字
odd選擇奇數even選擇偶數

:nth-child(odd)

#上述範例p:nth-child(odd)：選擇的是P的父級元素下的，奇數元素且該元素是P元素, 所以是

3. 第二個段落。

   和

   第四段。

   (p:nth-child(n) n=3與n=5)
   :nth-child(even)

4. 
   

 -上述範例p:nth-child(even)：選擇的是P的父級元素下的，偶數元素且該元素是P元素,所以是

第一個段落。

和

第三個段落。

和

第五個段落。

(p:nth-child(n) n=2且n=4 與n=6)

:nth-of-type(odd) ############ -上述範例p:nth-of-type(odd)：選擇的是P的父級元素下的，奇數的P元素,所以是###

### 和 ###

第三個段落。

### 和 ###

第五個段落。

### （ p:nth-of-type(odd) n=1和n=3 和n=5）############:nth-of-type( even)############ -上述範例p:nth-of-type(even)：選擇的是P的父級元素下的，偶數的P元素,所以是###< ;p>第二個段落。 ### 和 ###

第四段。

### （ p:nth-of-type(even) n=2和n=4 ）############5、 :nth-of-type(an b ) 和:nth-of-type(an b ) 規則和上述闡述的規則一樣### a表示週期的長度，n 是計數器（從0 開始），b 是偏移值。 ### 例如： :nth-of-type( 2n 1) 是第1,3,5 個P元素###############更多程式相關知識，請造訪：# ##程式設計入門###！ ！ ###

以上是CSS nth-of-type和nth-child的差別是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！