CSS 可选选择器

在 CSS 中，我们可以使用可选选择器来选择元素的不同状态或所处的位置。这些选择器可以让我们精确地选择我们想要的元素，从而实现更精细的样式控制。

:hover 选择器

:hover 选择器可以让我们在鼠标悬停在元素上时改变其样式。例如，当鼠标悬停在链接上时，我们可以改变链接的颜色或背景颜色。

a:hover {
  color: red;
}

在上面的代码中，我们使用 :hover 选择器选择了所有链接，并将它们的文字颜色设置为红色。当鼠标悬停在链接上时，它们的颜色就会变成红色。

:active 选择器

:active 选择器可以让我们在用户点击元素时改变其样式。例如，当用户点击一个按钮时，我们可以改变按钮的背景颜色或添加一个阴影效果。

button:active {
  box-shadow: 2px 2px 5px #888888;
}

在上面的代码中，我们使用 :active 选择器选择了所有按钮，并添加了一个阴影效果。当用户点击按钮时，按钮上会出现阴影效果。

:focus 选择器

:focus 选择器可以让我们在用户聚焦在一个元素上时改变其样式。例如，当用户在表单输入框中输入时，我们可以添加一个边框或改变输入框的背景颜色。

input:focus {
  border: 2px solid blue;
}

在上面的代码中，我们使用 :focus 选择器选择了所有输入框，并为它们添加了一个蓝色的边框。当用户点击输入框并开始输入时，输入框会被聚焦，并出现蓝色边框。

::before 和 ::after 伪元素

::before 和 ::after 是伪元素，可以让我们在元素的前面或后面添加内容。这些内容可以是纯文本或其他 HTML 元素，如图标或符号。

p::before {
  content: "❤ ";
}

p::after {
  content: " ❤";
}

在上面的代码中，我们使用 ::before 和 ::after 伪元素为所有段落元素添加了一个心形符号。这些符号将分别出现在段落的开头和结尾。

:first-child 和 :last-child 选择器

:first-child 和 :last-child 选择器可以让我们选择一个元素的第一个或最后一个子元素。例如，我们可以选择一个列表中的第一个和最后一个元素，并样式化它们。

ul li:first-child {
  color: red;
}

ul li:last-child {
  color: blue;
}

在上面的代码中，我们使用 :first-child 和 :last-child 选择器选择了一个无序列表中的第一个和最后一个元素，并将它们的颜色分别设置为红色和蓝色。

以上就是一些常用的 CSS 可选选择器。它们可以让我们选择元素的不同状态或所处的位置，并在需要时样式化它们。