CSS 伪类

CSS :nth -last-of-type() 伪类根据同类型兄弟元素中的位置选择一个或多个元素，从最后一个开始计数。

语法

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

可能值

  • odd - 该值表示从末尾开始计数的系列中的所有奇数编号（例如，1,3,5..等）同级元素.

  • even - 该值表示从末尾开始计数的系列中的所有偶数编号（例如，2,4,6...等）兄弟元素。

  • 函数符号 (<an+b>) - 该值表示从其父容器末尾开始计数的系列中的每个第 an+b 个子元素，其中 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>君不见黄河之水天上来，奔流到海不复回。 </p>
   <p>君不见高堂明镜悲白发，朝如青丝暮成雪。 </p>
   <p>人生得意须尽欢，莫使金樽空对月。</p>
   <p>天生我材必有用，千金散尽还复来。</p>
   <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
   <p>岑夫子，丹丘生，将进酒，杯莫停。</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>君不见黄河之水天上来，奔流到海不复回。 </p>
   <p>君不见高堂明镜悲白发，朝如青丝暮成雪。 </p>
   <p>人生得意须尽欢，莫使金樽空对月。</p>
   <p>天生我材必有用，千金散尽还复来。</p>
   <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
</body>
</html>