每个开发人员应该知道的 10 个 CSS 选择器

在开发 Web 应用程序时，CSS (Cascading Style Sheets)是必不可少的。它让我们能够样式化 HTML 元素并为用户呈现美观的网页。在本文中，我们将介绍 10 个每个开发人员都应该熟悉的 CSS 选择器。

1. ID 选择器

ID 选择器通过 HTML 元素的唯一 ID 属性进行选择。在 CSS 中，我们可以使用 # 符号来指定 ID。下面是一个简单的例子：

#my-element {
  /* some styles */
}

在上面的例子中，我们使用 ID 选择器选择了 ID （my-element）对应的 HTML 元素。

2. 类选择器

类选择器使用 HTML 元素的 class 属性进行选择。在 CSS 中，我们可以使用 . 符号来指定类名称。

.my-class {
  /* some styles */
}

在上面的例子中，我们使用类选择器选择了所有带有 "my-class" 类名称的 HTML 元素。

3. 属性选择器

属性选择器通过 HTML 元素的属性进行选择。在 CSS 中，我们可以使用 [ ] 符号来指定属性名称和属性值。下面是一个例子：

a[href="https://www.example.com"] {
  /* some styles */
}

在上面的例子中，我们使用属性选择器选择了所有链接到 "https://www.example.com" 的 a 元素。

4. 后代选择器

后代选择器选择 HTML 元素的后代元素。在 CSS 中，我们使用空格来表示后代元素。下面是一个例子：

.sidebar h3 {
  /* some styles */
}

在上面的例子中，我们使用后代选择器选择了侧边栏中的所有 h3 元素。

5. 子代选择器

子代选择器选择 HTML 元素的直接子代元素。在 CSS 中，我们使用 > 符号来表示子代元素。下面是一个例子：

ul > li {
  /* some styles */
}

在上面的例子中，我们使用子代选择器选择了所有 ul 元素下的直接 li 子元素。

6. 相邻兄弟选择器

相邻兄弟选择器选择 HTML 元素的下一个兄弟元素。在 CSS 中，我们使用 + 符号来表示下一个兄弟元素。下面是一个例子：

h1 + p {
  /* some styles */
}

在上面的例子中，我们使用相邻兄弟选择器选择了 h1 元素的下一个兄弟元素，即第一个 p 元素。

7. 通用选择器

通用选择器选择所有 HTML 元素。在 CSS 中，我们使用 * 符号来表示通用选择器。下面是一个例子：

* {
  /* some styles */
}

在上面的例子中，我们使用通用选择器选择了所有 HTML 元素并为它们应用了一些样式。

8. 伪类选择器

伪类选择器为 HTML 元素的状态提供了选择器。在 CSS 中，我们使用 : 符号来表示伪类选择器。下面是一些例子：

a:hover {
  /* some styles */
}

input:focus {
  /* some styles */
}

在上面的例子中，我们使用伪类选择器选择了链接元素的“悬停”状态，并为input 元素的“焦点”状态应用了样式。

9. 伪元素选择器

伪元素选择器为 HTML 元素的某个部分提供了选择器。在 CSS 中，我们使用 :: 符号来表示伪元素选择器。下面是一些例子：

p::first-line {
  /* some styles */
}

p::before {
  /* some styles */
}

在上面的例子中，我们使用伪元素选择器选择了段落元素的第一行，并为它们添加了样式。

10. 群组选择器

群组选择器允许选择多个不同的元素。在 CSS 中，我们使用逗号来分隔不同的元素。下面是一个例子：

h1, h2, h3 {
  /* some styles */
}

在上面的例子中，我们使用群组选择器选择了所有 h1，h2 和 h3 元素，并为它们应用了一些样式。

结论

这是每个开发人员都应该熟悉的10个 CSS 选择器，它们将帮助您更好地理解和使用 CSS。