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選擇器選擇具有特定類的元素。

當(dāng)與元素類型一起使用時，將選擇屬于指定類的指定類型的所有元素。

選擇器 *.class2 和 .class 是等效的。

以下代碼選擇類為 class2 的所有元素。

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

我們也可以使用類選擇器作為單元素類型。

我們可以進一步縮小選擇器的范圍，以便它只匹配已經(jīng)分配給 class2 的 span 元素。

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

分組選擇器

分組選擇器可以為多個選擇器添加樣式。

要分組選擇器，請用逗號分隔每個選擇器。

假設(shè)我們有以下樣式：

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;
}