CSS最后一个选择器

在CSS中，我们经常会用到伪类来选择元素的不同状态或位置。其中一个常用的伪类就是:last-of-type，它可以选择某个元素在其父元素中的最后一个子元素。在本文中，我们将详细介绍:last-of-type的用法和示例。

什么是:last-of-type选择器？

:last-of-type选择器是CSS3中的一个伪类，用于选择某个元素在其父元素中的最后一个子元素。它和:last-child选择器的区别在于:last-child选择的是父元素的最后一个子元素，而:last-of-type选择的是父元素中特定类型的元素的最后一个。

如何使用:last-of-type选择器？

:last-of-type选择器的语法比较简单，只需要在需要选择的元素前面加上:last-of-type即可。例如：

p:last-of-type {
  color: red;
}

上面的代码表示选择页面中所有<p>元素中的最后一个元素，并将其文字颜色设为红色。

:last-of-type示例

接下来，我们通过一个具体的示例来演示:last-of-type选择器的使用。

示例HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:last-of-type示例</title>
<style>
  p:last-of-type {
    font-weight: bold;
  }
</style>
</head>
<body>
  <h1>这是标题</h1>
  <p>这是第一段落</p>
  <p>这是第二段落</p>
  <p>这是最后一个段落</p>
</body>
</html>

示例运行结果

在上面的示例中，我们选择了页面中的最后一个<p>元素，并将其文字加粗显示。打开浏览器，会看到最后一个段落的文字确实变粗了。

注意事项

在使用:last-of-type选择器时，需要注意以下几点：
1. :last-of-type选择器只能用于选择元素的最后一个，不能选择倒数第二个、倒数第三个等等。
2. 如果父元素中没有指定类型的元素，:last-of-type选择器就不会生效。
3. 部分旧版浏览器可能不支持:last-of-type选择器，所以在使用时最好进行兼容性考虑。