CSS 选中最后一个元素

1. 前言

CSS（层叠样式表）是一种用于设计网页样式的标记语言，它可以被用来为网页添加样式和布局。在 CSS 中，选择器是用来定位特定元素并应用样式的一种机制。这篇文章将详细介绍如何使用 CSS 选择器选中最后一个元素。

2. CSS 选择器

在了解如何选中最后一个元素之前，让我们先回顾一下 CSS 选择器的基本知识。

2.1 元素选择器

元素选择器是最简单的选择器类型，它通过元素的标签名来选中元素。例如，下面的 CSS 代码选中了所有的 <p> 元素，并设置它们的文本颜色为红色：

p {
  color: red;
}

2.2 类选择器

类选择器是通过元素的 class 属性值来选中元素的。在 HTML 中，可以为元素指定一个或多个类名，通过在类名前添加一个点（.）来使用类选择器。例如，下面的 CSS 代码选中了所有带有类名为 highlight 的元素，并设置它们的背景颜色为黄色：

.highlight {
  background-color: yellow;
}

2.3 ID 选择器

ID 选择器是通过元素的 id 属性值来选中元素的。在 HTML 中，每个元素都有一个唯一的 id 属性。通过在 ID 值前添加一个井号（#）来使用 ID 选择器。例如，下面的 CSS 代码选中了 ID 值为 logo 的元素，并设置它的宽度为 200 像素：

#logo {
  width: 200px;
}

3. 选中最后一个元素

为了选中最后一个元素，我们可以使用 CSS 选择器中的伪类选择器 :last-child 或 :last-of-type。

3.1 `:last-child` 伪类选择器

:last-child 伪类选择器选中了其父元素的最后一个子元素。使用这个选择器，我们可以通过为父元素指定一个特定的标签名来选中其最后一个子元素。例如，下面的 CSS 代码选中了所有父元素为 <div> 的最后一个子元素，并设置它们的背景颜色为绿色：

div:last-child {
  background-color: green;
}

请注意，这个选择器只会选择标签名匹配的元素，并不考虑类名或 ID。如果需要根据类名或 ID 选中最后一个元素，可以使用 :last-of-type 伪类选择器。

3.2 `:last-of-type` 伪类选择器

:last-of-type 伪类选择器选中了其父元素中指定类型的最后一个元素。与 :last-child 不同，这个选择器会考虑元素的类型，并选择所有类型匹配的最后一个元素。以下是几个示例：

选中最后一个段落元素：
```
p:last-of-type {
font-weight: bold;
}
```

选中最后一个图片元素：

img:last-of-type {
border: 1px solid red;
}

选中最后一个带有类名为 button 的按钮元素：

.button:last-of-type {
background-color: blue;
color: white;
}

4. 示例代码

下面是一个示例代码，演示如何使用 :last-of-type 伪类选择器选中最后一个元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    p:last-of-type {
      font-weight: bold;
    }
  </style>
</head>
<body>

<h2>文章标题</h2>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是最后一个段落。</p>

</body>
</html>

上述代码会将最后一个段落元素的文字加粗显示。