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>

打印页面