CSS 中不同类型的选择器

在 CSS 中，选择器是用来选择一个或多个元素，然后对其进行样式修改的一种方式。选择器的种类有很多，接下来我们将会一一介绍。

标签选择器

标签选择器是最基本的一种选择器，其语法为 element，可用来选择指定标签名称的所有元素。例如：

p {
  color: red;
}

上述代码选择了页面中所有的 p 元素，并将其字体颜色修改为红色。

类选择器

类选择器是通过给 HTML 元素添加 class 属性并为其指定名称来创建的，其语法为 .class。例如：

.highlight {
  background-color: yellow;
}

上述代码选择了所有 class 属性为 highlight 的元素，并将其背景颜色修改为黄色。

ID 选择器

类似于类选择器，ID 选择器也是通过给 HTML 元素添加 id 属性并为其指定名称来创建的，但是 id 必须是唯一的，并且每个元素只能拥有一个 id，其语法为 #id。例如：

#header {
  font-size: 24px;
}

上述代码选择了 id 属性为 header 的元素，并将其字体大小修改为 24 像素。

属性选择器

属性选择器是通过选择具有指定属性的元素来创建的，其语法为 [attribute]。例如：

a[target] {
  color: blue;
}

上述代码选择了所有具有 target 属性的 a 元素，并将其字体颜色修改为蓝色。

子元素选择器

子元素选择器是通过为两个元素指定父子关系来选择元素的，其语法为 parent > child。例如：

ul > li {
  list-style-type: none;
}

上述代码选择了所有 ul 的子元素中的 li 元素，并将其列表样式设为无。

后代元素选择器

后代元素选择器是通过为两个元素建立祖先关系来选择元素的，其语法为 ancestor descendant。例如：

article p {
  line-height: 1.5;
}

上述代码选择了所有 article 元素的后代中的 p 元素，并将其行高修改为 1.5。

相邻兄弟选择器

相邻兄弟选择器是通过为两个元素指定相邻兄弟关系来选择元素的，其语法为 prev + next。例如：

h1 + p {
  font-weight: bold;
}

上述代码选择了紧随在 h1 元素之后的第一个 p 元素，并将其字体加粗。

通用兄弟选择器

通用兄弟选择器是通过为两个元素指定兄弟关系来选择元素的，其语法为 prev ~ siblings。例如：

h2 ~ p {
  margin-top: 10px;
}

上述代码选择了紧随在 h2 元素之后的所有 p 元素，并将其顶部外边距设置为 10 像素。

总结来说， CSS 中存在各种类型的选择器，我们可以根据具体情况选择适合的选择器来修改元素的样式。