CSS 选择器

选择器由 HTML 元素的 ID、类属性或元素名称本身以及一些用于指定定义样式的 HTML 元素的特殊符号组成。选择器是 CSS 样式规则的重要组成部分。选择器可以被认为是 CSS 样式和 HTML 元素之间的匹配模式，该样式规则应用于由选择器指定的 HTML 元素，您可以根据自己的喜好选择一个。

本节向您展示如何在 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.类选择器

类选择器可以根据标签的类属性来匹配特定的 HTML 标签，并且所有符合条件的标签都将根据选择器的样式进行格式化。类选择器定义必须使用英文句号后的类属性值，如下所示.

 
.black {
    color: black;
} 

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

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

 
p.black {
    color: black;
} 

p.black选择器仅将样式应用于所有具有class="black"属性的<p>标记，并且不会影响具有class="black"属性的其他标记。

此外，一个 HTML 标签可以有多个类属性。例如：

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

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

注意：在多类选择器中，多个类属性彼此相邻（例如 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>IT基礎.com</strong>へ！</p> <p><em><strong>IT基礎.com（it-kiso.com）</strong></em>は、優れたプログラミングチュートリアルを共有することに特化したオンラインプログラミング学習サイトです。</p> 

7.相邻兄弟选择器

相邻同级选择器用于匹配紧邻另一个元素之后的元素。两个元素具有相同的父元素并且不嵌套。相邻同级选择器定义必须使用加号+ ，并且两个相邻元素位于加号的两侧。选择器匹配加号后面的元素，如下所示。

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

h1 + p选择器匹配同一父元素下紧跟在<p>标记后面的<h1>标记。 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;
} 

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

 
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”开头的所有元素。