CSS :nth-of-type() 偽類

定義和用法

CSS :nth-of-type(n) 偽類用于匹配作為其父元素中同類型（標簽名）的第 n 個子元素的每個元素。

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

提示：查看 :nth-child() 偽類以選擇作為其父元素中第 n 個子元素的元素，無論其類型如何。

實例

例子 1

如何使用 :nth-of-type() 選擇器：

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

親自試一試

例子 2

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

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

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

親自試一試

例子 3

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

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

p:nth-of-type(3n+0) {
  background: red;
}

親自試一試

例子 4

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

p:nth-of-type(3n-1) {
  background: red;
}

親自試一試

CSS 語法

:nth-of-type(index | odd | even | an+b) {
  css declarations;
}

技術細節

瀏覽器支持

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