CSS选择器

CSS选择器用于根据元素的属性和类型选择相应的DOM元素。在CSS中，选择器由一个或多个规则组成。

类型选择器

类型选择器用于选择指定类型的元素。

例如，可以使用以下选择器选择所有段落元素：

p {
  color: red;
}

ID选择器

ID选择器用于选择具有指定ID属性的元素。ID是唯一的，因此只能为每个页面元素指定一个ID。

例如，可以使用以下选择器选择一个具有ID "example"的元素：

#example {
  color: blue;
}

类选择器

类选择器用于选择具有指定类的元素。

例如，以下选择器将选择所有具有类名“example”的元素：

.example {
  font-weight: bold;
}

属性选择器

属性选择器用于选择具有指定属性的元素。

例如，以下选择器将选择具有属性“target”的所有链接元素：

a[target] {
  text-decoration: none;
}

子元素选择器

子元素选择器用于选择一个元素的子元素。

例如，以下选择器将选择div元素中所有的p元素：

div > p {
  color: green;
}

相邻兄弟选择器

相邻兄弟选择器用于选择两个相邻兄弟元素。

例如，以下选择器将选择ul元素下的所有相邻的p元素：

ul + p {
  font-size: 16px;
}

通用选择器

通用选择器用于选择所有元素。

例如，以下选择器将选择页面中所有元素：

* {
  margin: 0;
  padding: 0;
}

结构化伪类选择器

结构化伪类选择器根据元素在文档结构中的位置选择元素。

例如，以下选择器将选择第一个p元素：

p:first-of-type {
  color: purple;
}

否定选择器

否定选择器用于选择不匹配指定选择器的元素。

例如，以下选择器将选择除了具有类“example”的元素以外的所有元素：

:not(.example) {
  border: 1px solid black;
}

以上是CSS选择器的一些常见类型和示例。熟练掌握这些选择器将帮助您更好地控制您的网页布局和样式。