CSS 选择器

CSS 选择器用于指定要设置样式的 HTML 元素，主要包括：通用选择器、元素选择器、id 选择器、类选择器、属性选择器和 CSS 组合器。

CSS 通用选择器

通用选择器 (*) 选择页面上的所有 HTML 元素。

语法： *

通用选择器匹配所有 HTML 元素：

* {
  text-align: center;
  color: blue;
}

!！通用选择器是性能最低的一个选择器，所以一般不建议使用。

CSS 元素选择器

元素选择器根据元素名称选择 HTML 元素。

语法： element_name

页面上的所有 <p> 元素文本为红色且居中对齐：

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

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。一个元素的 id 在一个页面中是唯一的。

语法： #id_name

下面的 CSS 规则将应用于 id=“logo” 的 HTML 元素：

#logo {
  text-align: center;
  color: red;
}

!! 注意： id 名称不能以数字开头！

CSS 类选择器

类选择器选择具有给定的 class 属性的 HTML 元素。

语法： .class_name

在这个例子中，所有带有 class=“center” 的 HTML 元素都将是红色的并且居中对齐：

.center {
  text-align: center;
  color: red;
}

您还可以选择具有某个 class 的特定元素。

在这个例子中，只有 class="center" 的 <p> 元素居中对齐：

p.center {
  text-align: center;
}

HTML 元素也可以引用多个类。

在这个例子中，.large 和 .center 的样式都会应用到 <p> 元素：

<style>
  .large {
    font-size: 60px;
  }
  .center {
    text-align: center;
  }
</style>
<p class="large center">大字体，居中对齐</p>

!! **注意：**类名不能以数字开头！

属性选择器

属性选择器可以为具有特定属性或属性值的 HTML 元素设置样式。

CSS 属性选择器语法：

• [attr]

  表示带有以 attr 命名的属性的元素。

• [attr="value"]

  表示带有以 attr 命名的属性，且属性值为 value 的元素。

• [attr~="value"]

  表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

• [attr|="value"]

  表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（-为连字符）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

• [attr^="value"]

  表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

• [attr$="value"]

  表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

• [attr*="value"]

  表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

CSS [attr] 选择器

CSS [attr] 选择器用于选择表示带有以 attr 命名的属性的元素。

以下示例选择所有具有 target 属性的 <a> 元素：

a[target] {
  background-color: yellow;
}

CSS [attr="value"] 选择器

CSS [ attr="value"] 选择器用于选择带有以 attr 命名的属性，且属性值为 value 的元素。

以下示例选择具有 target="_blank" 属性的所有 <a> 元素：

a[target="_blank"] {
  background-color: yellow;
}

CSS [attr~="value"] 选择器

CSS [ attr~="value"] 选择器用于选择带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

下面的示例选择的元素的 title 属性中包含一个单词 flower：

[title~="flower"] {
  border: 5px solid yellow;
}

上面的示例将匹配具有 title="flower"、title="summer flower" 和 title="flower new" 的元素，但不匹配 title="my-flower" 或 title="flowers"。

CSS [attr|="value"] 选择器

[ attr|="value"]选择器用于选择带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（- 为连字符）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）

以下示例选择 class 属性值以“top”开头的所有元素：

[class|="top"] {
  background: yellow;
}

!! **注意：**该值必须是一个完整的词，可以单独使用，如 class=“top”，也可以后跟连字符 (-)，如 class="top-text"

CSS [attr^="value"] 选择器

CSS [ attr^="value"]选择器用于选择带有以 attr 命名的属性，且属性值是以 value 开头的元素。

以下示例选择 class 属性值以“top”开头的所有元素：

[class^="top"] {
  background: yellow;
}

!! **注意：**该值不必是一个完整的词！

CSS [attr$=value] 选择器

CSS [ attr$="value"]选择器用于选择带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

以下示例选择 class 属性以“test”结尾的所有元素：

[class$="test"] {
  background: yellow;
}

**注意：**该值不必是一个完整的词！

CSS [attr*=value] 选择器

CSS [ attr*="value"]选择器用于选择带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

以下示例选择 class 属性值包含“te”的所有元素：

[class*="te"] {
  background: yellow;
}

**注意：**该值不必是一个完整的词！

CSS 分组选择器

CSS 分组选择器是将不同的选择器组合在一起的方法，样式会应用到所有在列表中的任意一个选择器选择的元素上。

分组选择器组合的是具有相同样式定义的选择器。

语法： selector_1, selector_2

h1、h2 和 p 元素具有相同的样式定义：

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

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

在这个例子中，分组选择器将样式相同的选择器组合在一起：

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

CSS 组合器

CSS 组合器利用元素与元素之间的关系将基本的选择器（通用选择器、元素选择器、ID 选择器、类选择器、属性选择仅）进行组合。

一个 CSS 选择器可以包含多个简单的选择器。在简单的选择器之间，我们可以包含一个组合器。

根据元素之间的关系 CSS 中有四种不同的组合器：

• 后代组合器（空格）：选择前一个元素的后代节点（孩子节点和孙子节点）。
• 直接子代组合器 (>)：选择前一个元素的直接子代的节点（孩子节点）。
• 紧邻兄弟组合器 (+)：选择紧跟在前一个元素之后的一个元素，两个元素具有同一个父节点（元素之后的紧挨的邻居兄弟节点）。
• 一般兄弟组合器 (~)：选择位于前一个元素之后的所有同级元素（元素后面的所有的兄弟节点）。

后代组合器

后代组合器选择前一个元素的所有的后代节点（孩子节点、孙子节点）。

语法： element_a element_b

以下示例选择 <div> 元素内的所有 <p> 元素：

div p {
  background-color: yellow;
}

直接子代组合器 (>)

直接子代组合器选择选择前一个元素的直接子代的节点（孩子节点）。

语法： element_a > element_b

以下示例选择作为 <div> 元素的直接孩子元素的所有 <p> 元素：

div > p {
  background-color: yellow;
}

紧邻兄弟组合器 (+)

紧邻兄弟组合器用于选择紧跟在前一个元素之后的一个元素，两个元素具有同一个父节点（元素之后的紧挨的邻居兄弟节点）。

语法： element_a + element_b

下面的示例选择紧跟在 <div> 元素之后的第一个 <p> 元素：

div + p {
  background-color: yellow;
}

一般兄弟组合器 (~)

一般兄弟组合器用于选择位于前一个元素之后的所有同级元素（元素后面的所有的兄弟节点）。

以下示例选择作为 <div> 元素的同级的并且在 <div> 之后的所有 <p> 元素：

div ~ p {
  background-color: yellow;
}

所有 CSS 简单选择器