类型、类别和 ID 选择器

¥Type selectors

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

¥A type selector is sometimes referred to as a tag name selector or element selector because it selects an HTML tag/element in your document. Type selectors are not case-sensitive. In the example below, we have used the span, em and strong selectors.

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

¥Try adding a CSS rule to select the <h1> element and change its color to blue.

¥The universal selector

通用选择器由星号 (*) 表示。它选择文档中的所有内容（如果父元素与另一个元素和后代组合器链接在一起，则选择父元素内部的所有内容）。在下面的示例中，我们使用通用选择器来删除所有元素上的边距。与浏览器添加的默认样式（用边距分隔标题和段落）不同，所有内容都紧密结合在一起。

¥The universal selector is indicated by an asterisk (*). It selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator). In the following example, we use the universal selector to remove the margins on all elements. Instead of the default styling added by the browser — which spaces out headings and paragraphs with margins — everything is close together.

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

¥This kind of behavior can sometimes be seen in "reset stylesheets", which strip out all of the browser styling. Since the universal selector makes global changes, we use it for very specific situations, such as the one described below.

¥Using the universal selector to make your selectors easier to read

通用选择器的用途之一是使选择器更易于阅读并且其所做的事情更加明显。例如，如果我们想要选择 <article> 元素的任何后代元素，这些元素是其父元素的第一个子元素（包括直接子元素），并将它们设置为粗体，我们可以使用 :first-child 伪类。我们将在 伪类和伪元素 课程中了解更多相关内容，作为后代选择器和 <article> 元素选择器：

¥One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if we wanted to select any descendant elements of an <article> element that are the first child of their parent, including direct children, and make them bold, we could use the :first-child pseudo-class. We will learn more about this in the lesson on pseudo-classes and pseudo-elements, as a descendant selector along with the <article> element selector:

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

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

¥However, this selector could be confused with article:first-child, which will select any <article> element that is the first child of another element.

为了避免这种混乱，我们可以将通用选择器添加到 :first-child 伪类中，这样选择器在做什么就更明显了。它选择 <article> 元素的第一个子元素或 <article> 的任何后代元素的第一个子元素：

¥To avoid this confusion, we can add the universal selector to the :first-child pseudo-class, so it is more obvious what the selector is doing. It is selecting any element which is the first-child of an <article> element, or the first-child of any descendant element of <article>:

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

虽然两者做的是同样的事情，但可读性却显着提高。

¥Although both do the same thing, the readability is significantly improved.

¥Class selectors

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

¥The case-sensitive class selector starts with a dot (.) character. It will select everything in the document with that class applied to it. In the live example below we have created a class called highlight, and have applied it to several places in my document. All of the elements that have the class applied are highlighted.

¥Targeting classes on particular elements

你可以创建一个选择器，该选择器将针对应用了类的特定元素。在下一个示例中，我们将高亮具有 highlight 类的 <span> 标题，与具有 highlight 类的 <h1> 标题不同。我们通过使用我们想要定位的元素的类型选择器来做到这一点，并使用点附加类，中间没有空格。

¥You can create a selector that will target specific elements with the class applied. In this next example, we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight. We do this by using the type selector for the element we want to target, with the class appended using a dot, with no white space in between.

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

¥This approach reduces the scope of a rule. The rule will only apply to that particular element and class combination. You would need to add another selector if you decided the rule should apply to other elements too.

¥Target an element if it has more than one class applied

你可以将多个类应用于一个元素并单独定位它们，或者仅当选择器中的所有类都存在时才选择该元素。当构建可以在站点上以不同方式组合的组件时，这会很有帮助。

¥You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.

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

¥In the example below, we have a <div> that contains a note. The grey border is applied when the box has a class of notebox. If it also has a class of warning or danger, we change the border-color.

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

¥We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You'll see that the last <div> doesn't get any styling applied, as it only has the danger class; it needs notebox as well to get anything applied.

¥ID selectors

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

¥The case-sensitive ID selector begins with a # rather than a dot character, but is used in the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single id value applied to them. It can select an element that has the id set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:

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

¥Warning: Using the same ID multiple times in a document may appear to work for styling purposes, but don't do this. It results in invalid code, and will cause strange behavior in many places.

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

¥Note: The ID selector has high specificity. This means styles applied based on matching an ID selector will overrule styles applied based on other selector, including class and type selectors. Because an ID can only occur once on a page and because of the high specificity of ID selectors, it is preferable to add a class to an element instead of an ID. If using the ID is the only way to target the element — perhaps because you do not have access to the markup and cannot edit it — consider using the ID within an attribute selector, such as p[id="header"]. Learn specificity.

¥Summary

这包含了类型、类和 ID 选择器。我们将通过查看 属性选择器 继续探索选择器。

¥That wraps up Type, class, and ID selectors. We'll continue exploring selectors by looking at attribute selectors.