写一个伪类选择器的实例

伪类选择器是CSS中的一种选择器，用于选择元素的特定状态或位置。以下是一个伪类选择器的示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 选择第一个段落元素 */
p:first-child {
  color: red;
}

/* 选择最后一个段落元素 */
p:last-child {
  color: blue;
}

/* 选择鼠标悬停在按钮上的状态 */
button:hover {
  background-color: yellow;
}

/* 选择选中的复选框 */
input:checked {
  border: 2px solid green;
}

/* 选择链接已访问过的状态 */
a:visited {
  color: purple;
}
</style>
</head>
<body>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

<button>Hover over me</button>

<input type="checkbox" checked> Checkbox

<a href="https://www.example.com">Visited link</a>

</body>
</html>

在上面的示例中，我们使用了伪类选择器来选择第一个段落元素（p:first-child），最后一个段落元素（p:last-child），鼠标悬停在按钮上的状态（button:hover），选中的复选框（input:checked），以及链接已访问过的状态（a:visited）并应用了不同的样式。