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

CSS :nth-last-of-type() 偽類根據元素在其同級元素中的位置（從最後一個元素開始計數）來選擇一個或多個元素，這些同級元素具有相同的型別。

語法

:nth-last-of-type( | even | odd) {
   /* ... */
}

可能的值

odd − 此值表示從末尾開始計數的一系列中所有奇數（例如，1、3、5 等）同級元素。
even − 此值表示從末尾開始計數的一系列中所有偶數（例如，2、4、6 等）同級元素。
函式表示法 (<an+b>) − 此值表示從其父容器末尾開始計數的一系列中每個 an+b-th 子元素，其中 a 是一個正整數，n 是一個從 0 開始的計數器變數。b 是另一個正整數。

CSS :nth-last-of-type() 示例

以下是一個演示如何使用 :nth-last-of-type() 選擇器來設定從底部開始的第三個 p 元素的樣式的示例 -

<html>
<head>
<style>
   p:nth-last-of-type(3) {
      background-color: pink;
      color: blue;
   }
</style>
</head>
<body>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
   <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   <p>The standard chunk of Lorem Ipsum used since the 1500s</p>
   <p>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero</p>
   <p>Lorem Ipsum is therefore always free from repetition,</p>
</body>
</html>

以下是如何以不同的方式設定奇數和偶數段落的樣式的示例 -

<html>
<head>
<style>
   p:nth-last-of-type(odd) {
      background-color: pink;
      color: blue;
   }
   p:nth-last-of-type(even) {
      background-color: greenyellow;
      color: red;
   }
</style>
</head>
<body>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   <p>The standard chunk of Lorem Ipsum used since the 1500s</p>
   <p>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero</p>
   <p>Lorem Ipsum is therefore always free from repetition,</p>
</body>
</html>

列印頁面