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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　<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>

　　如果我們想選擇第五個(gè)元素div，我們可以簡(jiǎn)單地寫(xiě)下面的內(nèi)容

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

關(guān)于“css如何使用nth-child和nth-of-type”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。