没有应用任何样式，因为它只具有 danger 类；它还需要 notebox 才能应用任何样式。

html

cssbody {

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 都匹配时才定位该元素。你可以在以下示例中看到这两种用法。

html

ID selector

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion

daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley

shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra

wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

cssbody {

font-family: sans-serif;

}

#one {

background-color: yellow;

}

h1#heading {

color: rebeccapurple;

}

警告： 在一个文档中多次使用相同的 ID 可能在样式化方面看起来有效，但请不要这样做。这会导致代码无效，并在许多地方引起奇怪的行为。

使用 ID 选择器

尝试编辑上面的示例以进行以下更改：

编辑 HTML 以将 #one 样式应用于第一个段落而不是第二个段落。

编辑 CSS 以修改 ID 选择器中的声明，并注意这如何改变 HTML 的外观。

选择器列表

如果多个事物使用相同的 CSS，那么单个选择器可以组合成一个选择器列表，以便将规则应用于所有单个选择器。例如，如果我的 h1 和一个 .special 类具有相同的 CSS，我可以通过编写两条单独的规则来实现。

cssh1 {

color: blue;

}

.special {

color: blue;

}

我也可以通过在它们之间添加逗号，将它们组合成一个选择器列表。

cssh1, .special {

color: blue;

}

逗号前后允许有空白。如果每个选择器都在新的一行上，你可能会觉得选择器更具可读性。

cssh1,

.special {

color: blue;

}

使用选择器列表

在下面的示例中，尝试组合两个具有相同声明的选择器。组合后，视觉显示应该保持不变。

html

Type selectors

Veggies es bonus vobis, proinde vos postulo essum magis

kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki

bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley

shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra

wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce

kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter

purslane kale. Celery potato scallion desert raisin horseradish spinach

cssbody {

font-family: sans-serif;

}

span {

background-color: yellow;

}

strong {

color: rebeccapurple;

}

em {

color: rebeccapurple;

}

选择器列表中的无效选择器

当你以这种方式对选择器进行分组时，如果任何选择器在语法上无效，则整个规则都将被忽略。

在下面的示例中，无效的类选择器规则将被忽略，而 h1 仍将得到样式化。

cssh1 {

color: blue;

}

..special {

color: blue;

}

然而，当它们组合在一起时，h1 和类都不会被样式化，因为整个规则被认为是无效的。

cssh1, ..special {

color: blue;

}

通用选择器

通用选择器由星号 (*) 表示。它选择文档中的所有内容。如果 * 使用后代组合器连接，它会选择该祖先元素内的所有内容。例如，p * 选择

元素内的所有嵌套元素。

在以下示例中，我们使用通用选择器移除所有元素的边距。与浏览器默认的通过边距分隔标题和段落的样式不同，所有内容都紧密地排列在一起。

html

Universal selector

Veggies es bonus vobis, proinde vos postulo essum magis

kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki

bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley

shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra

wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

cssbody {

font-family: sans-serif;

}

* {

margin: 0;

}

这种行为有时可以在“重置样式表”中看到，它们会去除所有浏览器样式。由于通用选择器会进行全局更改，我们将其用于非常特定的情况，例如下面描述的情况。

使用通用选择器让你的选择器更易读

通用选择器的一种用途是使选择器更易读，更清晰地表达其作用。例如，如果我们想选择

元素的任何后代元素（包括直接子元素），这些元素是其父级的第一个子元素，并将其加粗，我们可以使用 :first-child 伪类。我们将在关于伪类和伪元素的课程中学习更多内容。

cssarticle :first-child {

font-weight: bold;

}

然而，这个选择器可能会与 article:first-child 混淆，后者将选择作为另一个元素的第一个子元素的任何

元素。

为了避免这种混淆，我们可以将通用选择器添加到 :first-child 伪类中，这样选择器所做的事情就更明显了。它选择的是作为

元素的第一个子元素的任何元素，或者是

的任何后代元素的第一个子元素。

cssarticle *:first-child {

font-weight: bold;

}

尽管两者做的事情相同，但可读性显著提高。

总结

在本文中，我们回顾了 CSS 选择器，它使你能够定位特定的 HTML 元素，并比之前更深入地探讨了类型、类和 ID 选择器。在下一篇文章中，我们将深入探讨属性选择器。

注意： 有关选择器的完整列表，请参阅我们的 CSS 选择器参考。

另见

CSS 类，Scrimba MDN 学习合作伙伴

一个提供 CSS 类指导的互动课程。

上一页概述：CSS 样式基础下一页

帮助改进 MDN

此页面对您有帮助吗？

是

否

了解如何贡献 此页面由 MDN 贡献者 最后修改于 ⁨2025 年 8 月 12 日⁩。

在 GitHub 上查看此页面 • 报告此内容的问题