CSS选择器

精华

小牛编辑

150浏览

2023-03-14

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器，您可以根据自己的喜好来选择使用。

本节我们来介绍一下 CSS 中几种常用选择器的定义方式：

1. 通用选择器

通用选择器用星号 *表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：

* {
    margin: 0 auto;
    padding: 0;
}

注意：虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素，但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点，频繁的使用会给浏览器带来太多不必要的压力。

2. 标签选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

p {
    color: blue;
}

p 选择器能够匹配文档中所有的 <p> 标签。

3. ID 选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号 #，后面紧跟 ID 属性的值，如下所示：

#nav {
    color: red;
}

#nav 选择器能够匹配文档中具有 id="nav" 属性的标签。

4. 类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号 .，后面紧跟 class 属性的值，如下所示：

.black {
    color: black;
}

.black 选择器能够匹配文档中所有具有 class="black" 属性的标签。

由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：

p.black {
    color: black;
}

p.black 选择器仅会将其中的样式应用到所有具有 class="black" 属性的 <p> 标签中，对于其它的具有 class="black" 属性的标签则没有影响。

另外，一个 HTML 标签中 class 属性可能不止一个，例如：

<p class="info selected"></p>
<p class="info"></p>

假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景，则可以写成下面这样：

.info {
    font-weight:bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

注意：多类选择器中，多个 class 属性之间是紧挨着的（例如 .info.selected），不需要使用空格分开。

5. 后代选择器

当一个 <p> 标签嵌套在一个 <div> 标签内部的时候，就可以将这个 <p> 标签看作是 <div> 标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：

ul li a {
    text-decoration: none;
}

ul li a 选择器仅会匹配无序列表 <ul> 标签的所有后代 <a> 标签。

6. 子选择器

子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号 >分隔开，如下所示：

p > strong {
    color:red;
}

p > strong 选择器会将下面代码中第一个 <p> 标签的子标签 <strong> 内的文字设置为红色，但对第二个 <p> 标签中的 <strong>标签则没有影响。

<p>欢迎访问<strong>编程帮</strong>！</p>
<p><em><strong>编程帮（xnip.cn）</strong></em>，一个在线学习编程的网站，专注于分享优质编程教程。</p>

7. 相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号 +，加号两边为相邻的两个元素，选择器会匹配加号后面的元素，如下所示：

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

h1 + p 选择器会匹配同一父级元素下紧邻 <h1> 标签并在其后的 <p> 标签。 ul.task + p 选择器则会匹配同一父级元素下紧邻 <ul>标签并在其后的 <p>标签，但 <ul>要具有 class="task" 属性。

8. 通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号 ~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素，如下所示：

h1 ∼ p {
    color: blue;
    font-size: 18px;
}

h1 ∼ p 选择器会匹配同一父级元素下 <h1> 标签之后的所有 <p> 标签。

9. 分组选择器

分组选择器可以将同样的样式规则应用到多个选择器中，每个选择器之间使用逗号 ,进行分隔，这么做可以避免定义重复的样式规则，最大程度地减少 CSS 样式表中的代码。例如，在 CSS 样式表中，不同的选择器中可能包含同样的样式规则，如下所示：

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

我们可以看到选择器 h1、 h2、 h3 中包含相同的样式 font-weight: normal;，这时就可以先使用分组选择器为 h1、 h2、 h3 定义它们之间同样的样式规则，然后再分别定义它们之间不同的样式规则，如下所示：

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}

10. 属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号 [ ]来指定标签具有的属性信息，如下所示：

input[type="text"] {
   color: blue;
}

input[type="text"] 选择器会匹配所有具有 type="text" 属性的 <input>标签。

属性选择器中方括号 [ ]内的属性信息还支持以下几种写法：

[target]：选择所有带有 target 属性元素；
[target=_blank]：选择所有具有 target="_blank" 属性的元素；
[title~=flower]：选择 title 属性包含单词“flower”的所有元素；
[lang|=en]：选择 lang 属性正好是“en”或以“en”为开头的所有元素。