這篇文章將為大家詳細講解有關(guān)css如何使用nth-child和nth-of-type，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)樂東黎族,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

nth-child()是怎樣工作的？

nth-child()偽類用于根據(jù)數(shù)字匹配元素，該數(shù)字表示元素在其兄弟元素中的位置。更具體地說，數(shù)字表示文檔樹中元素（減去1）之前存在的兄弟姐妹的數(shù)量。

這個數(shù)表示為函數(shù)a+b，其中n是索引，a和b是我們通過的任何整數(shù)。例如，為了選擇每一個元素，我們可以編寫以下任何一個：

:nth-child(1n+0){/*樣式*/}

:nth-child(n+0){/*樣式*/}

:nth-child(1n){/*樣式*/}

除了使用這個函數(shù)，我們還可以傳遞一個整數(shù)，例如:nth-child(1)，或者set關(guān)鍵字，odd（奇數(shù)）或者even（偶數(shù)）。這些關(guān)鍵字是寫出用于選擇每個奇數(shù)或偶數(shù)元素的函數(shù)符號的備選方案。

:nth-child(odd){/*奇數(shù)元素的樣式*/}

:nth-child(2n+1){/*奇數(shù)元素的樣式*/}

:nth-child(even){/*偶數(shù)元素的樣式*/}

:nth-child(2n+0){/*偶數(shù)元素的樣式*/}

:nth-child()單獨使用時，可以很容易地預(yù)測選擇哪個元素。例如，使用此標(biāo)記：

Thisisaparagraph.

Thisisaparagraph.

Thisisaparagraph.

Thisisaparagraph.

Thisisaparagraph.

Thisisaparagraph.