选择器

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 规则中，selector 是 .my-css-rule 该函数会查找页面上类为 my-css-rule 的所有元素。 大括号内包含三个声明。 声明是“属性-值”对，用于将样式应用于与选择器匹配的元素。 一条 CSS 规则可以包含任意数量的声明和选择器。

简单选择器

最直接的一组选择器定位 HTML 元素加上 类、ID 和其他属性。

通用选择器

浏览器支持

  • Chrome：1. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：1. <ph type="x-smartling-placeholder">
  • Safari：1. <ph type="x-smartling-placeholder">

来源

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

* {
  color: hotpink;
}

此规则会导致网页上的每个 HTML 元素都有艳粉色文字。

类型选择器

浏览器支持

  • Chrome：1. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：1. <ph type="x-smartling-placeholder">
  • Safari：1. <ph type="x-smartling-placeholder">

来源

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

section {
  padding: 2em;
}

此规则会使每个 <section> 元素的 2em 数为 padding。

类选择器

浏览器支持

  • Chrome：1. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：1. <ph type="x-smartling-placeholder">
  • Safari：1. <ph type="x-smartling-placeholder">

来源

一个 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 选择器

浏览器支持

  • Chrome：1. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：1. <ph type="x-smartling-placeholder">
  • Safari：1. <ph type="x-smartling-placeholder">

来源

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

#rad {
  border: 1px solid blue;
}

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

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

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

属性选择器

浏览器支持

  • Chrome：1. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：1. <ph type="x-smartling-placeholder">
  • Safari：3. <ph type="x-smartling-placeholder">

来源

您可以查找具有特定 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 简单选择器。
通用
* 是通用简单选择器。
类别
. 用于类简单选择器。
 
div {}

上述代码段中使用了哪种简单选择器？

类别
. 用于类简单选择器。
类型
element 名称用于 type 简单选择器。
属性
方括号 [] 用于属性简单选择器。
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;
}

此代码段选择所有 <strong> 元素 这些元素只是 <p> 元素的子元素，使其以递归方式变为蓝色。

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

在上面的示例中，效果更明显， 使用组合器选择器 .top div。 该 CSS 规则会向这些 <div> 元素添加左侧内边距。 由于组合器是递归的， .top 中的所有 <div> 元素都会应用相同的内边距。

请看一下本演示中的 HTML 面板 看看 .top 元素是如何有多个本身的 <div> 子元素， 有 <div> 个子元素。

下一个同级组合运算符

您可以查找紧接在另一个元素的后面 方法是在选择器中使用+字符。

若要在堆叠的元素之间增加空间： 使用下一个同级组合器添加空间 仅当某个元素是 .top 的子元素的下一个同级元素时。

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

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

这样做的问题在于，由于您选择了 .top 的每个子元素， 此规则可能会造成不必要的额外空间。 下一个同级组合运算符， 混合使用通用选择器，您不仅可以控制哪些元素获得空间， 还可以为任何元素留出空间。 这为您提供了一定的长期灵活性 而不会考虑 .top 中出现哪些 HTML 元素。

后续 - 同级组合器

后续组合器与下一个同级选择器非常相似。 不过，与 + 字符不同， 使用 ~ 字符。 不同之处在于，元素只需跟随另一个具有相同父元素的元素， 而不是成为下一个具有相同父级的元素。

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

这个后续组合器的刚性略低， 这在上述示例等上下文中很有用， 我们可以在其中更改自定义开关的颜色，前提是它所关联的复选框的状态为 :checked。

子组合器

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

考虑上一个和下一个同级选择器示例。 该空间会添加到每个下一个同级， 但如果其中一个元素也有下一个同级元素作为子元素， 可能会导致不必要的额外间距。

为了缓解这个问题 更改下一个同级选择器以包含子组合器：> * + *。 现在，该规则将仅应用于 .top 的直接子项。

复合选择器

您可以结合使用选择器来提高特异性和可读性。 例如，如需定位 <a> 元素， 且具有 .my-class 类，则编写以下代码：

a.my-class {
  color: red;
}

此操作并不会对所有链接都应用红色 并且只会将红色应用于.my-class 如果它位于 <a> 元素上。 如需了解详情，请参阅特异性模块。

检查您的理解情况

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

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

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

上面的选择器是一个...

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

资源