CSS :nth-last-of-type() 偽類

定義和用法

CSS :nth-last-of-type(n) 偽類用于匹配作為其父元素中特定類型的倒數第 n 個子元素的每個元素。

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

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

實例

例子 1

為每個作為其父元素倒數第二個 <p> 元素的 <p> 元素指定背景顏色。

同時，為每個作為其父元素倒數第三個 <li> 元素的 <li> 元素指定背景顏色：

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

親自試一試

例子 2

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

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

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

親自試一試

例子 3

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

在這里，我們為倒數索引是 3 的倍數的所有 <p> 和 <li> 元素指定背景顏色：

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

親自試一試

CSS 語法

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

技術細節

瀏覽器支持

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