CSS3選擇器[:nth-child()]與[:nth-of-type()]的分別

現時的CSS3提供了很多新的屬性,為網頁開發帶來很好的便利,而CSS3提供了許多的選擇器可使用,直接針對HTML的標籤就可以直接進行選擇與樣式的設定,大量減少了一些類別的設定。

今天來講一下有關兩個長得很像的選擇器 nth-child 與 nth-of-type,這兩個選擇器在一般使用情況下,使用起來效果很像,但如果HTML的結構有不一樣時,出來就效果就很大不同。因此今天寫了一些小範例,讓大家看看這兩個屬性分別是甚麼。

CSS3 :nth-child()


範例裏的網頁中有多個 p 標籤時,可使用 :nth-child 選擇器的方式來進行選擇,使用odd表示只要選出來為單數的 p 標籤背景會套用顏色。

觀看結果會看到只有單數的 p 標籤背景會套用顏色,然而再使用 :nth-of-type 選擇器測試亦會看到相同效果。

但到底兩種選擇器的差別在哪呢? 讓我們再嘗試改變網頁的結構,在 p 標籤下都加入其它標籤,如範例我加入了 hr 標籤。

這時候顯示的結果就有了不一樣的變化,觀看結果發現,為甚麼 p 標籤背景都套用了顏色。

原因在於當使用 :nth-child 時,這個選擇器並不是只篩選 p 標籤,而會將網頁中的所有標籤都會一起計算,所以當我在每一個 p 標籤下加入一個 hr 標籤後,所有的 p 標籤就變成單數列了。

CSS3 :nth-of-type()


如果把選擇器換成 :nth-of-type 選擇器又會出現甚麼情況呢?觀看結果是跟預期一樣,只有單數列的 p 標籤背景會套用顏色。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

驗證碼 * Time limit is exhausted. Please reload CAPTCHA.

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料