當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

nth-child和nth-of-type的区别

發(fā)布時間：2023/12/14 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 nth-child和nth-of-type的区别小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

nth-child定義：(來自MDN)

nth-child總結(jié)：

nth-of-type定義:(來自MDN)

nth-of-type總結(jié):

nth-child定義：(來自MDN)

:nth-child(an+b) 這個 CSS 偽類首先找到所有當(dāng)前元素的兄弟元素，然后按照位置先后順序從 1 開始排序，選擇的結(jié)果為 CSS 偽類:nth-child 括號中表達(dá)式（an+b）匹配到的元素集合（n=0，1，2，3...）。

例子一：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-child(2n+1){background-color: pink;}</style> </head> <body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>5</h1><h1>6</h1><h1>7</h1><h1>8</h1> </body> </html>

效果圖：

例子二：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-child(2n+1){background-color: pink;}</style> </head> <body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><div>5</div><h1>6</h1><h1>7</h1><h1>8</h1> </body> </html>

效果圖：

nth-child總結(jié)：

通過以上兩個例子可以看出，nth-child是將當(dāng)前的所有兄弟元素進(jìn)行排序，從1開始，然后根據(jù)條件改變相應(yīng)效果。但是即使兄弟元素在選中的位置，比如例子二中<div>5</div>是在奇數(shù)行，但是效果照樣不會生效，只有h1才會生效。

nth-of-type定義:(來自MDN)

:nth-of-type() 這個 CSS 偽類是針對具有一組兄弟節(jié)點(diǎn)的標(biāo)簽，用 n 來篩選出在一組兄弟節(jié)點(diǎn)的位置。

例子一：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-of-type(2n+1){background-color: pink;}</style> </head> <body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>5</h1><h1>6</h1><h1>7</h1><h1>8</h1> </body> </html>

效果圖：

例子二：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-of-type(2n+1){background-color: pink;}</style> </head> <body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><div>5</div><h1>6</h1><h1>7</h1><h1>8</h1> </body> </html>

效果圖：

nth-of-type總結(jié):

nth-of-type是只按同一個標(biāo)簽進(jìn)行排序，也就是說排序只對同一個標(biāo)簽起作用。例如例子二中的5的標(biāo)簽是div，所以并不在排序范圍內(nèi)。

總結(jié)

以上是生活随笔為你收集整理的nth-child和nth-of-type的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。