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

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

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)把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：css如何使用nth-child和nth-of-type
文章分享：http://chinadenli.net/article40/goieho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、搜索引擎優(yōu)化、做網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)