基本的 CSS 选择器
在 CSS 中，你已经了解了选择器是如何用来定位我们网页上想要样式化的 HTML 元素的。CSS 提供了多种多样的选择器，可以在选择要样式化的元素时实现精确控制。在接下来的几篇文章中，我们将深入探讨不同类型的选择器。本文将回顾一些选择器的基础知识，包括基本类型选择器、类选择器、ID 选择器和选择器列表。我们还将介绍通用选择器。
| 预备知识 | HTML 基础知识（学习 基本 HTML 语法）。 |
|---|---|
| 学习成果 |
|
什么是选择器？
CSS 选择器是 CSS 规则的第一部分。它是由元素和其他术语组成的模式，用于告诉浏览器应选择哪些 HTML 元素来应用规则中的 CSS 属性值。被选择器选中的一个或多个元素被称为选择器的主体。
在之前的文章中，你可能已经遇到了一些不同的选择器，并了解到有多种方式可以定位文档中的元素——例如，通过选择一个元素（如 h1）或一个类（如 .special）。让我们从回顾你已经见过的一些主要选择器开始。
类型选择器
类型选择器有时被称为标签名选择器或元素选择器，因为它选择文档中的 HTML 标签/元素。在下面的示例中，我们使用了 span、em 和 strong 选择器。
尝试编辑以下示例（点击 "Play" 在 MDN Playground 中打开），添加一条 CSS 规则，选择 <h1> 元素并将其颜色更改为蓝色。
<h1>Type selectors</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis
<span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
bean garlic.
</p>
<p>
Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>
body {
font-family: sans-serif;
}
span {
background-color: yellow;
}
strong {
color: rebeccapurple;
}
em {
color: rebeccapurple;
}
类选择器
区分大小写的类选择器以点（.）字符开头。它将选择文档中应用了该类的所有内容。在下面的实时示例中，我们创建了一个名为 highlight 的类，并将其应用到文档中的多个位置。所有应用了该类的元素都将被高亮显示。
<h1 class="highlight">Class selectors</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis
<span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
tomatillo melon azuki bean garlic.
</p>
<p class="highlight">
Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
body {
font-family: sans-serif;
}
.highlight {
background-color: yellow;
}
使用类选择器
尝试编辑上面的示例（使用 MDN Playground）以进行以下更改：
- 编辑 HTML 以更改
.highlight样式所应用到的内容。例如，你可以添加一些<span>元素来包裹现有内容的不同部分并对其应用highlight类，删除一些现有的highlight类，或添加一些新内容并对其应用highlight类。 - 编辑 CSS 以修改
.highlight规则中的声明，如果需要，可以添加新的声明，并注意这会如何影响所有应用了highlight类的元素的样式。 - 在 CSS 中创建一个新的类规则，其中包含不同的声明（例如，选择器为
.highlight2），然后尝试将其应用到你的某些 HTML 中。
定位特定元素上的类
你可以创建一个选择器，用于定位应用了该类的特定元素。在下一个示例中，我们将把带有 highlight 类的 <span> 和带有 highlight 类的 <h1> 标题以不同方式高亮显示。我们通过使用我们想要定位的元素的类型选择器，并在其后面紧跟一个点号（没有空格）和类名来实现这一点。
<h1 class="highlight">Class selectors</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis
<span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
tomatillo melon azuki bean garlic.
</p>
<p class="highlight">
Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
body {
font-family: sans-serif;
}
span.highlight {
background-color: yellow;
}
h1.highlight {
background-color: pink;
}
这种方法缩小了规则的作用范围。该规则将只应用于特定的元素和类的组合。如果你决定该规则也应应用于其他元素，则需要添加另一个选择器。
如果元素应用了多个类，则定位该元素
你可以将多个类应用于一个元素并单独定位它们，或者仅当选择器中包含所有类时才选择该元素。这在构建可以以不同方式组合到你的网站上的组件时非常有用。
在下面的示例中，我们有一个包含注释的 <div>。当该框具有 notebox 类时，会应用灰色边框。如果它还具有 warning 或 danger 类，我们会更改 border-color。
我们可以通过将两个类链接在一起，中间没有空格，来告诉浏览器我们只希望匹配同时应用了这两个类的元素。你会看到最后一个 <div> 没有应用任何样式，因为它只具有 danger 类；它还需要 notebox 才能应用任何样式。
<div class="notebox">This is an informational note.</div>
<div class="notebox warning">This note shows a warning.</div>
<div class="notebox danger">This note shows danger!</div>
<div class="danger">
This won't get styled — it also needs to have the notebox class
</div>
body {
font-family: sans-serif;
}
.notebox {
border: 4px solid #666666;
padding: 0.5em;
margin: 0.5em;
}
.notebox.warning {
border-color: orange;
font-weight: bold;
}
.notebox.danger {
border-color: red;
font-weight: bold;
}
ID 选择器
区分大小写的 ID 选择器以 # 而不是点字符开头，但其用法与类选择器相同。不同之处在于一个 ID 在每个页面上只能使用一次，并且元素只能应用一个 id 值。它可以选择设置了 id 的元素，并且你可以在 ID 前面加上类型选择器，以便仅当元素和 ID 都匹配时才定位该元素。你可以在以下示例中看到这两种用法。
<h1 id="heading">ID selector</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p id="one">
Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
body {
font-family: sans-serif;
}
#one {
background-color: yellow;
}
h1#heading {
color: rebeccapurple;
}
警告： 在一个文档中多次使用相同的 ID 可能在样式化方面看起来有效，但请不要这样做。这会导致代码无效，并在许多地方引起奇怪的行为。
使用 ID 选择器
尝试编辑上面的示例以进行以下更改：
- 编辑 HTML 以将
#one样式应用于第一个段落而不是第二个段落。 - 编辑 CSS 以修改 ID 选择器中的声明，并注意这如何改变 HTML 的外观。
选择器列表
如果多个事物使用相同的 CSS，那么单个选择器可以组合成一个选择器列表，以便将规则应用于所有单个选择器。例如，如果我的 h1 和一个 .special 类具有相同的 CSS，我可以通过编写两条单独的规则来实现。
h1 {
color: blue;
}
.special {
color: blue;
}
我也可以通过在它们之间添加逗号，将它们组合成一个选择器列表。
h1, .special {
color: blue;
}
逗号前后允许有空白。如果每个选择器都在新的一行上，你可能会觉得选择器更具可读性。
h1,
.special {
color: blue;
}
使用选择器列表
在下面的示例中，尝试组合两个具有相同声明的选择器。组合后，视觉显示应该保持不变。
<h1>Type selectors</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis
<span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
bean garlic.
</p>
<p>
Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>
body {
font-family: sans-serif;
}
span {
background-color: yellow;
}
strong {
color: rebeccapurple;
}
em {
color: rebeccapurple;
}
选择器列表中的无效选择器
当你以这种方式对选择器进行分组时，如果任何选择器在语法上无效，则整个规则都将被忽略。
在下面的示例中，无效的类选择器规则将被忽略，而 h1 仍将得到样式化。
h1 {
color: blue;
}
..special {
color: blue;
}
然而，当它们组合在一起时，h1 和类都不会被样式化，因为整个规则被认为是无效的。
h1, ..special {
color: blue;
}
通用选择器
通用选择器由星号 (*) 表示。它选择文档中的所有内容。如果 * 使用后代组合器连接，它会选择该祖先元素内的所有内容。例如，p * 选择 <p> 元素内的所有嵌套元素。
在以下示例中，我们使用通用选择器移除所有元素的边距。与浏览器默认的通过边距分隔标题和段落的样式不同，所有内容都紧密地排列在一起。
<h1>Universal selector</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis
<span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
bean garlic.
</p>
<p>
Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
body {
font-family: sans-serif;
}
* {
margin: 0;
}
这种行为有时可以在“重置样式表”中看到，它们会去除所有浏览器样式。由于通用选择器会进行全局更改，我们将其用于非常特定的情况，例如下面描述的情况。
使用通用选择器让你的选择器更易读
通用选择器的一种用途是使选择器更易读，更清晰地表达其作用。例如，如果我们想选择 <article> 元素的任何后代元素（包括直接子元素），这些元素是其父级的第一个子元素，并将其加粗，我们可以使用 :first-child 伪类。我们将在关于伪类和伪元素的课程中学习更多内容。
article :first-child {
font-weight: bold;
}
然而，这个选择器可能会与 article:first-child 混淆，后者将选择作为另一个元素的第一个子元素的任何 <article> 元素。
为了避免这种混淆，我们可以将通用选择器添加到 :first-child 伪类中，这样选择器所做的事情就更明显了。它选择的是作为 <article> 元素的第一个子元素的任何元素，或者是 <article> 的任何后代元素的第一个子元素。
article *:first-child {
font-weight: bold;
}
尽管两者做的事情相同，但可读性显著提高。
总结
在本文中，我们回顾了 CSS 选择器，它使你能够定位特定的 HTML 元素，并比之前更深入地探讨了类型、类和 ID 选择器。在下一篇文章中，我们将深入探讨属性选择器。
注意： 有关选择器的完整列表，请参阅我们的 CSS 选择器参考。
另见
- CSS 类，Scrimba MDN 学习合作伙伴
-
一个提供 CSS 类指导的互动课程。