CSS | 有效的选择器

在 CSS 中，我们可以使用不同的选择器来选择需要样式化的 HTML 元素。在这里，我们将学习有效的选择器，以便完全掌握 CSS 的使用。

基本选择器

基本选择器适用于元素名称、类名、ID 等。

元素选择器

元素选择器是指以 HTML 元素名称来选择元素的方式。例如，要选择所有段落，我们可以使用以下代码块：

p {
  color: red;
}

类选择器

类选择器使用 . 符号，后跟类名称来选择元素。例如，要选择具有 "example" 类的所有元素，我们可以使用以下代码块：

.example {
  font-size: 18px;
}

ID 选择器

ID 选择器使用 # 符号，后跟 ID 名称来选择元素。例如，要选择具有 "navbar" ID 的元素，我们可以使用以下代码块：

#navbar {
  background-color: black;
  color: white;
}

属性选择器

属性选择器基于元素的属性值来选择元素。例如，属性选择器可以选择具有特定 href 属性的所有链接。

[attribute] 属性选择器

这种类型的属性选择器选择具有指定属性的元素。例如，要选择具有 target 属性的所有链接，我们可以使用以下代码块：

a[target] {
  color: red;
}

[attribute=value] 属性选择器

此类型的属性选择器选择具有指定属性和值的元素。例如，要选择 href 属性值为 https://example.com 的所有链接，我们可以使用以下代码块：

a[href="https://example.com"] {
  color: blue;
}

[attribute^=value] 属性选择器

此类型的属性选择器选择具有属性值以指定值开头的元素。例如，要选择具有 src 属性值以 https 开头的所有图像，我们可以使用以下代码块：

img[src^="https"] {
  border: 1px solid black;
}

[attribute$=value] 属性选择器

此类型的属性选择器选择具有属性值以指定值结尾的元素。例如，要选择具有 href 属性值以 .pdf 结尾的所有链接，我们可以使用以下代码块：

a[href$=".pdf"] {
  text-decoration: underline;
}

[attribute*=value] 属性选择器

此类型的属性选择器选择具有属性值包含指定值的元素。例如，要选择包含 example 的 class 属性的所有元素，我们可以使用以下代码块：

[class*="example"] {
  color: green;
}

伪类选择器

伪类选择器被用于选取不处于特定状态的元素，或元素的特定状态。

:hover 伪类选择器

:hover 伪类选择器用于指定鼠标悬停在元素上时的样式。例如，将鼠标悬停在链接上时显示下划线，我们可以使用以下代码块：

a:hover {
  text-decoration: underline;
}

:active 伪类选择器

:active 伪类选择器用于指定元素处于活动状态（已被点击但鼠标按钮还没有释放）时的样式。例如，将按钮的背景色设置为灰色，我们可以使用以下代码块：

button:active {
  background-color: gray;
}

总结

以上是常见的有效的 CSS 选择器。选择器是 CSS 非常重要的一部分，掌握了这些选择器后，您可以更好地控制 HTML 元素的样式和布局。