选择器

CSS 播客 - 第 002 集：选择器

如果您有某些文本只在是文章第一段时才要放大并设为红色，该怎么做？

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

您可以使用 CSS 选择器查找该特定元素并应用 CSS 规则，如下所示。

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS 为您提供了许多选项来选择元素并对其应用规则，这些选项从非常简单到非常复杂，可帮助您解决此类问题。

CSS 规则的组成部分

若要了解选择器的运作方式及其在 CSS 中的作用，请务必了解 CSS 规则的各个部分。CSS 规则是一段代码，包含一个或多个选择器和一个或多个声明。

一张图片，显示了选择器为 .my-css-rule 的 CSS 规则。

在此 CSS 规则中，选择器为 .my-css-rule，用于查找网页上类为 my-css-rule 的所有元素。大括号内有三个声明。声明是属性和值对，用于将样式应用于选择器匹配的元素。CSS 规则可以包含任意数量的声明和选择器。

简单选择器

最简单的一组选择器会定位到 HTML 元素，以及可能添加到 HTML 标记中的类、ID 和其他属性。

通用选择器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

通用选择器（也称为通配符）可与任何元素匹配。

* {
  color: hotpink;
}

此规则会导致网页上的每个 HTML 元素都使用 Hotpink 文本。

类型选择器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

类型选择器会直接与 HTML 元素匹配。

section {
  padding: 2em;
}

此规则会导致每个 <section> 元素的所有边都具有 padding 的 2em。

类选择器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

HTML 元素可以在其 class 属性中定义一个或多个项。类选择器会与应用了该类的任何元素匹配。

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

应用了该类的任何元素都会变为红色：

.my-class {
  color: red;
}

请注意，. 仅存在于 CSS 中，而不存在于 HTML 中。 这是因为 . 字符会指示 CSS 语言匹配类属性成员。这是 CSS 中常见的模式，其中一个或一组特殊字符用于定义选择器类型。

即使具有 .my-class 类的 HTML 元素具有多个其他类，也仍会与上述 CSS 规则匹配，如下所示：

<div class="my-class another-class some-other-class"></div>

这是因为 CSS 会查找包含所定义类的 class 属性，而不是与该类完全匹配的属性。

ID 选择器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

具有 id 属性的 HTML 元素应是网页上具有该 ID 值的唯一元素。您可以使用 ID 选择器选择元素，如下所示：

#rad {
  border: 1px solid blue;
}

此 CSS 会将蓝色边框应用于 id 为 rad 的 HTML 元素，如下所示：

<div id="rad"></div>

与类选择器 . 类似，使用 # 字符可指示 CSS 查找与其后面的 id 匹配的元素。

属性选择器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

您可以使用属性选择器查找具有特定 HTML 属性或具有特定 HTML 属性值的元素。使用方括号 ([ ]) 将选择器括起来，指示 CSS 查找属性。

[data-type='primary'] {
  color: red;
}

此 CSS 会查找属性为 data-type 且值为 primary 的所有元素，如下所示：

<div data-type="primary"></div>

您也可以搜索包含该属性的元素，而不必查找 data-type 的特定值，无论其值如何。

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

这两个 <div> 元素的文本都将显示为红色。

您可以通过向属性选择器添加 s 运算符来使用区分大小写的属性选择器。

[data-type='primary' s] {
  color: red;
}

这意味着，如果 HTML 元素的 data-type 为 Primary（而非 primary），则不会显示红色文本。您可以使用 i 运算符执行相反的操作（不区分大小写）。

除了大小写运算符之外，您还可以使用与属性值中的字符串部分匹配的运算符。

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
在此演示中，属性选择器中的 `$` 运算符会从 `href` 属性中获取文件类型。 这样，您就可以使用伪元素根据文件类型为标签添加前缀。

分组选择器

选择器不必仅与单个元素匹配。您可以使用英文逗号分隔多个选择器，以便对其进行分组：

strong,
em,
.my-class,
[lang] {
  color: red;
}

此示例会将颜色更改扩展到 <strong> 元素和 <em> 元素。它还会扩展到名为 .my-class 的类和具有 lang 属性的元素。

检查您的理解情况

测试您对简单选择器的了解程度

* {}

上面的代码段使用了哪种简单选择器？

属性
[] 用于属性简单选择器。
ID
# 用于 ID 简单选择器。
通用
* 是通用简单选择器。
类别
. 用于 class 简单选择器。
 
div {}

上面的代码段使用了哪种简单选择器？

类别
. 用于 class 简单选择器。
类型
element 名称用于类型简单选择器。
属性
方括号 [] 用于属性简单选择器。
ID
# 用于 ID 简单选择器。

伪类和伪元素

CSS 提供了一些实用的选择器类型，可专注于特定平台状态，例如元素悬停时、元素内部的结构或元素的某些部分。

伪类

HTML 元素会处于各种状态，这可能是因为用户与其互动，或者其某个子元素处于某种状态。

例如，用户可以使用鼠标指针悬停在 HTML 元素上，或者用户也可以悬停在子元素上。对于这些情况，请使用 :hover 伪类。

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

如需了解详情，请参阅伪类模块。

伪元素

伪元素与伪类不同，因为它们不是响应平台状态，而是像使用 CSS 插入新元素一样。伪元素在语法上也与伪类不同，因为我们使用的是双冒号 (::)，而不是单冒号 (:)。

.my-element::before {
  content: 'Prefix - ';
}

如上方演示中所示，您可以使用 ::before 伪元素在元素开头插入内容，也可以使用 ::after 伪元素在元素结尾插入内容。

不过，伪元素不仅限于插入内容。您还可以使用它们定位到元素的特定部分。例如，假设您有一个列表。使用 ::marker 为列表中的每个项目符号（或数字）设置样式

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

您还可以使用 ::selection 为用户突出显示的内容设置样式。

::selection {
  background: black;
  color: white;
}

如需了解详情，请参阅关于伪元素的模块。

检查您的理解情况

测试您对伪类选择器的了解程度

伪元素选择器使用多少个英文冒号？

:
一个 : 用于定位伪类。
::
两个 :: 用于定位伪元素。
:::
这无效，并且没有任何目标。
 
p:hover {
  background: white;
  color: black;
}

上面的代码段使用了哪种伪类选择器？

伪类
一个 : 用于定位伪类。
伪元素
两个 :: 用于定位伪元素。

复杂选择器

您已经看到了各种各样的选择器，但有时，您需要对 CSS 进行更精细的控制。这时，复杂选择器就派上用场了。

值得注意的是，虽然以下选择器可以让我们更灵活地选择，但我们只能向下级联，选择子元素。我们无法向上定位并选择父元素。 我们将在后续课程中介绍什么是级联以及级联的运作方式。

组合器

组合元件位于两个选择器之间。例如，如果选择器为 p > strong，则组合符为 > 字符。使用这些组合符的选择器可帮助您根据项目在文档中的位置选择项目。

后代组合元

如需了解后代组合元，您需要先了解父元素和子元素。

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

父元素是包含文本的 <p>。该 <p> 元素内包含一个 <strong> 元素，用于将其内容设置为粗体。由于它位于 <p> 内，因此它是子元素。

借助后代组合符，我们可以定位到子元素。这会使用空格 () 指示浏览器查找子元素：

p strong {
  color: blue;
}

此代码段仅选择 <p> 元素的子元素的所有 <strong> 元素，并递归地将其设为蓝色。

由于后代组合元是递归的，因此系统会应用添加到每个子元素的内边距，从而产生错开排列的效果。

在上面的示例中，使用组合元选择器 .top div 可以更好地直观呈现此效果。该 CSS 规则会为这些 <div> 元素添加左内边距。由于组合元是递归的，因此 .top 中的所有 <div> 元素都会应用相同的内边距。

查看此演示中的 HTML 面板，了解 .top 元素如何包含多个 <div> 子元素，这些子元素本身也包含 <div> 子元素。

下一个同级组合元件

您可以在选择器中使用 + 字符来查找紧随另一个元素的元素。

如需在堆叠的元素之间添加间距，请仅在元素是 .top 的子元素的下一个同胞兄弟时，使用下一个同胞兄弟组合元来添加间距。

您可以使用以下选择器为 .top 的所有子元素添加边距：

.top * {
  margin-top: 1em;
}

问题在于，由于您选择了 .top 的每个子元素，因此此规则可能会创建额外的不必要空间。将下一个同胞组合符与通用选择器搭配使用，您不仅可以控制哪些元素会获得间距，还可以将间距应用于任何元素。这样，无论 .top 中显示了哪些 HTML 元素，您都可以灵活地进行长期规划。

后续同级组合元

后续的组合元很类似于下一个同胞兄弟选择器。不过，请改用 ~ 字符，而不是 + 字符。不同之处在于，元素只需紧随具有相同父元素的其他元素，而无需是具有相同父元素的下一个元素。

使用后续选择器和 `:checked` 伪类创建纯 CSS 开关元素。

此后续组合元件会稍微降低严格性，这在上述示例等上下文中非常有用，在这些上下文中，我们会在关联的复选框处于 :checked 状态时更改自定义开关的颜色。

子组合元

借助子组合符（也称为直接后代），您可以更好地控制组合符选择器附带的递归。通过使用 > 字符，您可以限制组合元选择器仅应用于直接子项。

请考虑前面的“next sibling”选择器示例。 系统会将此间距添加到每个同级兄弟元素，但如果其中一个元素还具有同级兄弟元素作为子元素，则可能会导致不必要的额外间距。

为了缓解此问题，请更改下一个同胞兄弟选择器，以纳入子组合符：> * + *。该规则现在仅适用于 .top 的直接子项。

复合选择器

您可以组合使用选择器，以提高选择范围的明确性和可读性。例如，若要定位到同时具有 .my-class 类的 <a> 元素，请编写以下代码：

a.my-class {
  color: red;
}

这不会对所有链接应用红色，并且只会在 .my-class 位于 <a> 元素上时对 .my-class 应用红色。if如需了解详情，请参阅明确性模块。

检查您的理解情况

测试您对复杂选择器的知识掌握情况

以下哪个符号不是选择器组合符？

>
直接后代组合符。
÷
无效，不是 CSS 符号。
+
下一个同级组合符。
*
此通用简单选择器。
.
类简单选择器。
 
section.awesome {
  border: 1px solid hotpink;
}

上面的选择器示例展示了...

组合器
用于将选择器组合成更具体的选择器的符号。
复合选择器
将 2 个或更多选择器组合使用（不使用组合符），以创建更具体的选择器。
终止符
这不是选择器类型，但听起来像是，对吗？🤖?

资源