创建 CSS 选择器 - CSS

CSS 选择器是用于选择 HTML 元素并设置其样式的重要工具。在本文中，我们将介绍各种常用的 CSS 选择器以及如何使用它们。

元素选择器

元素选择器是最常用的选择器之一。您可以使用元素名称来选择 HTML 元素。例如，以下代码会选择所有段落元素并将它们的颜色设置为红色。

p {
  color: red;
}

类选择器

类选择器允许您选择具有特定类的元素。您可以在 CSS 文件中为元素定义类，然后使用该类选择器将样式应用于具有该类的所有元素。例如，如果您定义了一个名为 "my-class" 的类，并希望将所有具有该类的按钮的背景颜色设置为蓝色，则可以使用以下代码：

.my-class {
  background-color: blue;
}

ID 选择器

ID 选择器类似于类选择器，但是您可以根据特定标识符选择一个元素。例如，以下代码将选择具有 "my-id" ID 的元素并将其颜色设置为绿色。

#my-id {
  color: green;
}

属性选择器

属性选择器允许您选择具有特定属性值的元素。例如，以下代码将选择具有 src 属性的所有图像元素并将它们的宽度设置为 200 像素。

img[src] {
  width: 200px;
}

后代选择器

后代选择器允许您选择某个元素的子元素。例如，以下代码将选择所有类为 "my-class" 的 div 元素内的所有 p 元素，并将它们的颜色设置为红色。

div.my-class p {
  color: red;
}

伪选择器

伪选择器允许您选择不符合基本选择器模式的元素，例如，您可以选择第一个子元素或最后一个子元素。以下是一些常用的伪选择器示例。

• :first-child - 选择元素的第一个子元素。
• :last-child - 选择元素的最后一个子元素。
• :hover - 选择当鼠标指针悬停在元素上时应用的样式。
• :active - 选择当元素被点击并处于活动状态时应用的样式。

例如，以下代码将选择第一个 p 元素并将其颜色设置为红色。

p:first-child {
  color: red;
}

总结

通过使用各种 CSS 选择器，您可以轻松地为网页添加样式和效果。元素选择器、类选择器、ID 选择器、属性选择器、后代选择器和伪选择器是最常用的 CSS 选择器类型。请掌握这些选择器，以便更好地控制您的网页样式。