CSS3選擇器「:nth-child()」與「:nth-of-type()」用法大不同

梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
  雖然說目前CSS3還沒正式的標準化,但新的屬性已為網頁帶來許多的便利,像是大家所熟悉的圓角框、陰影、漸層、多欄位....,甚至目前正夯的RWD自適應,這些都是需要使用到CSS3,除此之外CSS3還提供了許多的選擇器可使用,如此一來就可大量的減少一些類別的設定,直接透過HTML的標籤就可直接進行選擇與樣式的設定,雖然說很方便,但在CSS3有二個選擇器長的很像nth-child與nth-of-type,在正常情況下,二個用起來很像,但若HTML的結構改變時,二個就大不同啦!!!因此梅干作了一個小範例,來幫大家解惑,這二個屬性的最大差別什麼地方。

CSS3-:nth-child()
當網頁中有4個p標籤時,可用nth-child的方式,來進行選擇,當下odd表示,只要是單數列背景就會套用成淺灰色。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
這時候只要是奇數列的p標籤,背景就會變成淺灰色,在這種情況下,即便使用nth-of-type也會得到一樣的效果。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
改變一下網頁的架構,把p標籤下方,加入<hr>來將區塊與區塊間來畫一條。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
這時就會看到,全有p標籤的背景都變成淺灰色的了。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
原因就出在,當使用nth-child時,它並不是只篩選p標籤,而是網頁中的所有標籤都會一起計算,所以可看到,這時所有的p就變成奇數列了。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
CSS3-:nth-of-type()
這時只要把原本的nth-child改成nth-of-type,就只會針對網頁中的p標籤進行篩選。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同
鏘~鏘~這時候就只有在奇數列的p標籤的背景才會套用淺灰色 。
梅問題-CSS教學-CSS3選擇器「nth-child與nth-of-type」大不同

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。