类型、类和 ID 选择器

在本课中，我们将探讨一些最简单的选择器，它们可能是您在工作中使用频率最高的。

先决条件 安装基本软件、基本的文件操作知识（学习 文件处理）、HTML 基础知识（学习 HTML 简介）以及 CSS 工作原理的概念（学习 CSS 入门）。
目标 了解我们可以用来将 CSS 应用于文档的不同 CSS 选择器。

类型选择器

类型选择器有时被称为标签名称选择器或元素选择器，因为它选择文档中的 HTML 标签/元素。类型选择器不区分大小写。在下面的示例中，我们使用了span、em 和strong 选择器。

尝试添加一个 CSS 规则来选择<h1> 元素并将它的颜色更改为蓝色。

通用选择器

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

在下面的示例中，我们使用通用选择器来移除所有元素的边距。浏览器默认的样式会用边距来隔开标题和段落，但现在所有内容都紧密地排列在一起。

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

使用通用选择器使选择器更易于阅读

通用选择器的一个用途是使选择器更易于阅读，并使它们的功能更加直观。例如，如果我们想要选择<article> 元素的任何后代元素，这些元素都是其父元素的第一个子元素（包括直接子元素），并将它们设置为粗体，我们可以使用 :first-child 伪类。我们将在有关 伪类和伪元素 的课程中学习更多相关内容，它作为后代选择器与<article> 元素选择器一起使用。

css
article :first-child {
  font-weight: bold;
}

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

为了避免这种混淆，我们可以在:first-child 伪类中添加通用选择器，这样它就可以更清楚地表明选择器正在做什么。它选择的是任何作为<article> 元素的第一个子元素的元素，或作为<article> 的任何后代元素的第一个子元素。

css
article *:first-child {
  font-weight: bold;
}

虽然两者效果相同，但可读性明显提高。

类选择器

区分大小写的类选择器以点 (.) 字符开头。它将选择文档中应用了该类的所有内容。在下面的实时示例中，我们创建了一个名为highlight 的类，并将其应用于文档中的多个位置。所有应用了该类的元素都将被高亮显示。

针对特定元素上的类

您可以创建一个选择器来针对应用了该类的特定元素。在下一个示例中，我们将以不同于带有highlight 类的<h1> 标题的方式来高亮显示带有highlight 类的<span>。为此，我们使用要针对的元素的类型选择器，并将类附加在后面，用点隔开，两者之间没有空格。

这种方法缩小了规则的范围。该规则只适用于特定元素和类的组合。如果决定该规则也应该应用于其他元素，则需要添加另一个选择器。

如果元素应用了多个类，则针对该元素

您可以将多个类应用于一个元素，并分别针对它们，或者只在选择器中存在所有类时才选择该元素。这在构建可以在网站上以不同方式组合的组件时非常有用。

在下面的例子中，我们有一个包含注释的<div>。当该框具有notebox类时，将应用灰色边框。如果它还具有warning或danger类，我们将更改border-color。

我们可以告诉浏览器，只有当元素应用了两个类时才匹配它，方法是在它们之间不留空格的情况下将它们链接在一起。你会看到最后一个<div>没有应用任何样式，因为它只有danger类；它还需要notebox才能应用任何样式。

ID 选择器

区分大小写的 ID 选择器以#而不是点字符开头，但使用方式与类选择器相同。但是，一个 ID 只能在每个页面上使用一次，并且元素只能应用一个id值。它可以选择一个在其上设置了id的元素，并且可以在 ID 前面加上类型选择器，以便仅在元素和 ID 匹配时才定位该元素。你可以在下面的例子中看到这两种用法。

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

注意：ID 选择器具有很高的特异性。这意味着基于匹配 ID 选择器应用的样式将覆盖基于其他选择器应用的样式，包括类和类型选择器。因为一个 ID 在一个页面上只能出现一次，并且由于 ID 选择器的高特异性，最好向元素添加一个类而不是一个 ID。如果使用 ID 是定位元素的唯一方法——可能是因为你无法访问标记并且无法编辑它——请考虑在属性选择器内使用 ID，例如p[id="header"]。 了解特异性.

总结

到这里，类型、类和 ID 选择器就介绍完了。我们将继续探索选择器，看看属性选择器。