當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/14 编程问答 29 豆豆

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

nth-child定義：(來自MDN)

nth-child總結：

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

nth-of-type總結:

nth-child定義：(來自MDN)

:nth-child(an+b) 這個 CSS 偽類首先找到所有當前元素的兄弟元素，然后按照位置先后順序從 1 開始排序，選擇的結果為 CSS 偽類:nth-child 括號中表達式（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總結：

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

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

:nth-of-type() 這個 CSS 偽類是針對具有一組兄弟節點的標簽，用 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總結:

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。