css如何使用nth-child和nth-of-type

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

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

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

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

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

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

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

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

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

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

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

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

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

　　<divclass="example">

　　<p>Thisisa<em>paragraph</em>.</p>

　　<p>Thisisa<em>paragraph</em>.</p>

　　<p>Thisisa<em>paragraph</em>.</p>

　　<div>Thisisa<em>divider</em>.</div>

　　<div>Thisisa<em>divider</em>.</div><!--選擇元素-->

　　<p>Thisisa<em>paragraph</em>.</p>

　　<p>Thisisa<em>paragraph</em>.</p>

　　<div>Thisisa<em>divider</em>.</div>

　　<p>Thisisa<em>paragraph</em>.</p>

　　<div>Thisisa<em>divider</em>.</div>

　　</div>

　　如果我們想選擇第五個元素div，我們可以簡單地寫下面的內容

　　.example:nth-child(5){background:#ffdb3a;}

關于“css如何使用nth-child和nth-of-type”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。