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

在 Web 开发中，CSS 选择器是一项非常重要的技术。选择器可以用来选择要应用样式的 HTML 元素，以及其它元素的子孙、兄弟等。

以下是每个开发人员都应该知道的 10 个 CSS 选择器：

1. 类选择器 （Class Selector）

类选择器是通过使用一个 . 后紧跟 class 名称来定义的。例如，以下 CSS 规则将会将所有 class 属性为 "my-class" 的元素的文本颜色设置为红色：

.my-class {
  color: red;
}

2. ID 选择器 （ID Selector）

ID 选择器是通过使用一个 # 后紧跟 ID 名称来定义的。例如，以下 CSS 规则将会将 ID 为 "my-id" 的元素的文本颜色设置为红色：

#my-id {
  color: red;
}

3. 类型选择器 （Type Selector）

类型选择器是通过使用元素类型名称来定义的。例如，以下 CSS 规则将会将所有 p 元素的文本颜色设置为红色：

p {
  color: red;
}

4. 属性选择器 （Attribute Selector）

属性选择器是通过使用属性名称和属性值来选择元素的。例如，以下 CSS 规则将会将所有具有 href 属性的 a 元素的文本颜色设置为红色：

a[href] {
  color: red;
}

5. 子元素选择器 （Child Selector）

子元素选择器是通过使用 ">" 符号来选中直接子元素。例如，以下 CSS 规则将会将所有 div 元素的直接子元素 p 元素的文本颜色设置为红色：

div > p {
  color: red;
}

6. 后代选择器 （Descendant Selector）

后代选择器是通过使用空格符来选中后代元素。例如，以下 CSS 规则将会将所有 div 元素中的 p 元素的文本颜色设置为红色：

div p {
  color: red;
}

7. 相邻兄弟选择器 （Adjacent Sibling Selector）

相邻兄弟选择器是通过使用 "+" 符号来选中紧邻其前一个兄弟元素的元素。例如，以下 CSS 规则将会将 class 为 "my-class" 的元素且紧邻其前一个兄弟元素为 div 的元素的文本颜色设置为红色：

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

8. 通用兄弟选择器 （General Sibling Selector）

通用兄弟选择器是通过使用 "~" 符号来选中与其前面的兄弟元素匹配的所有元素。例如，以下 CSS 规则将会将所有与 class 为 "my-class" 的元素前面的 div 兄弟元素的文本颜色设置为红色：

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

9. 伪类选择器 （Pseudo-Class Selector）

伪类选择器是用来为特殊状态的元素定义样式的。例如，以下 CSS 规则将会为所有处于被悬停状态下的 a 元素设置背景颜色为红色：

a:hover {
  background-color: red;
}

10. 伪元素选择器 （Pseudo-Element Selector）

伪元素选择器是用来设置元素的特殊部分的样式。例如，以下 CSS 规则将会将所有 p 元素的第一行文本设置为红色：

p::first-line {
  color: red;
}

以上是每个开发人员都应该知道的 10 个 CSS 选择器。随着你的实践和学习，你可能会遇到更多类型的选择器。但是，对于大多数情况，这些选择器足以解决你的问题。