CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} 虛類用於匹配作為其父元素第 n 個子元素的任何元素。

此虛類根據元素在其父元素的子列表中的索引來匹配元素。

n 可以是一個數字/索引、一個關鍵字（odd 或 even) 或一個公式（如 an + b)。

提示：查看 :nth-of-type() 虛類以選擇作為其父元素中同類型（標籤名）的 n 個子元素的元素。

實例

例子 1

如何使用 :nth-child() 虛類：

/* 選擇任何兄弟元素組中的每第四個元素 */
:nth-child(4) {
  background-color: yellow;
}
/* 選擇 div 兄弟元素中的第二個元素 */
div:nth-child(2) {
  background-color: red;
}
/* 選擇列表中的第二個 li 元素 */
li:nth-child(2) {
  background-color: lightgreen;
}

親自試一試

例子 2

odd 和 even 是關鍵字，可用於匹配索引為奇數或偶數的子元素（第一個子元素的索引為 1）。

在這裡，我們為奇數索引和偶數索引的 <p> 元素指定不同的背景顏色：

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

親自試一試

例子 3

使用公式（an + b) 描述：a 表示整數步長，n 是從 0 開始的所有非負整數，b 是整數偏移量。

在這裡，我們為索引是 3 的倍數的所有 <p> 元素指定背景顏色（將選擇第三個、第六個、第九個等元素）：

p:nth-child(3n+1) {
  background-color: red;
}

親自試一試

例子 4

在這裡，我們為索引是 3 的倍數的所有 <p> 元素指定背景顏色。然後我們減去 1（將選擇第一個、第四個、第七個等元素）：

p:nth-child(3n-1) {
  background-color: red;
}

親自試一試

CSS 語法

:nth-child(index | 奇數 | 偶數 | an+b) {
  css declarations;
}

技術細節

瀏覽器支持

表格中的數字指定了完全支持該虛類型的首個瀏覽器版本。