CSS :nth-child() 偽類
示例
如何使用 :nth-child() 偽類
/* 選擇所有兄弟元素中的第四個元素 */
:nth-child(4) {
background-color: yellow;
}
/* 選擇 div 兄弟元素中的第二個元素 */
div:nth-child(2) {
background-color: red;
}
/* 選擇列表中的第二個 li 元素 */
li:nth-child(2) {
background-color: lightgreen;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
:nth-child(n) 偽類匹配其父元素的第 n 個子元素的任何元素。
此偽類根據元素在其父元素的子元素列表中的索引來匹配元素。
n 可以是數字/索引、關鍵字（odd 或 even）或公式（如 an + b）。
提示：檢視 :nth-of-type() 偽類，用於選擇其父元素的第 n 個同類型（標籤名）的子元素。
| 版本 | CSS3 |
|---|
瀏覽器支援
表中數字表示該偽類完全支援的第一個瀏覽器版本。
| 偽類 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS 語法
更多示例
示例
odd 和 even 是關鍵字，可以用來匹配索引為奇數或偶數的子元素（第一個子元素的索引為 1）。
這裡，我們為奇數和偶數 p 元素指定了兩種不同的背景顏色
p:nth-child(odd) {
background-color: red;
}
p:nth-child(even) {
background: lightgreen;
}
自己動手試一試 »
示例
使用公式（an + b）。說明：a 表示一個整數步長，n 是所有非負整數，從 0 開始，b 是一個整數偏移值。
在此，我們為索引是 3 的倍數的所有 p 元素指定背景顏色（將選擇第三個、第六個、第九個，依此類推）。
p:nth-child(3n+1) {
background-color: red;
}
自己動手試一試 »
示例
在此，我們為索引是 3 的倍數的所有 p 元素指定背景顏色。然後我們減去 1（將選擇第一個、第四個、第七個，依此類推）。
p:nth-child(3n-1) {
background-color: red;
}
自己動手試一試 »
