css选择器有哪几种 CSS 选择器

CSS使用选择器来选择HTML元素并添加样式。

CSS选择器可以基于其id，类，类型，属性，属性值等选择HTML元素。

元素选择器

您可以使用元素类型作为选择器来选择元素的所有实例。

以下代码为所有锚元素添加边框和填充。

a {
  border: thin black solid;
  padding: 4px;
}

id选择器

ID选择器通过 id 属性选择元素。

元素的id属性的值在HTML中必须是唯一的文件。

ID选择器正在查找单个元素。

以下代码选择id为 myAnchor 的元素。

#myAnchor {
  border: thin black solid;
  padding: 4px;
}

class选择器

class选择器选择具有特定类的元素。

当与元素类型一起使用时，将选择属于指定类的指定类型的所有元素。

选择器 *.class2 和 .class 是等效的。

以下代码选择类为 class2 的所有元素。

.class2 {
  border: thin black solid;
  padding: 4px;
}

我们也可以使用类选择器作为单元素类型。

我们可以进一步缩小选择器的范围，以便它只匹配已经分配给 class2 的 span 元素。

span.class2 {
  border: thin black solid;
  padding: 4px;
}

分组选择器

分组选择器可以为多个选择器添加样式。

要分组选择器，请用逗号分隔每个选择器。

假设我们有以下样式：

h1 {
    text-align: center;
    color: red;
}
h2 {
    text-align: center;
    color: red;
}
p {
    text-align: center;
    color: red;
}

在下面的示例中，我们将来自上面代码的选择器分组：

h1, h2, p {
    text-align: center;
    color: red;
}