CSS 选择器：掌握基础样式技巧

介绍

欢迎来到 CSS 选择器基础实验 (lab)！层叠样式表 (CSS) 是万维网的一项基石技术，用于描述以 HTML 等标记语言编写的文档的呈现。

CSS 选择器是用于选择和样式化你想要的 HTML 元素的模式。掌握选择器是任何 Web 开发者的基本技能。在这个实验中，你将学习如何使用最常见的 CSS 选择器类型来样式化一个简单的网页。

你将练习：

实验环境已预先配置了 index.html 文件。你的任务是在 styles.css 文件中编写 CSS 代码来样式化页面。你可以通过切换到界面左上角的 Web 8080 标签来实时预览你的更改。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 92%。获得了学习者 99% 的好评率。

在此步骤中，你将使用元素选择器为页面上的所有 <p> (段落) 元素应用样式。元素选择器是最基本的选择器类型；它们根据标签名 (tag name) 选择 HTML 元素。

首先，在 WebIDE 左侧的文件浏览器中找到 styles.css 文件。点击它在编辑器中打开。

现在，将以下 CSS 代码添加到 styles.css 文件中。这条规则将选择所有 <p> 元素，并将其文本颜色更改为蓝色。

p {
  color: blue;
}

添加代码后，保存文件 (你可以使用 Ctrl+S 或 Cmd+S)。要查看效果，请点击 Web 8080 标签。你应该会看到页面上所有三个段落的文本都变成了蓝色。

在此步骤中，你将学习使用类选择器 (class selector)。类选择器比元素选择器更具体。它们根据元素的 class 属性值来选择元素。类选择器以一个句点 (.) 开头，后跟类名。

在你的 index.html 文件中，其中一个段落具有 class="highlight" 属性。我们将定位这个特定的段落。

将以下 CSS 规则添加到你的 styles.css 文件中。这将选择任何具有 highlight 类的元素，并为其设置黄色背景。

.highlight {
  background-color: yellow;
}

保存 styles.css 文件并切换到 Web 8080 标签以查看你的更改。你会注意到，只有文本为 "This is a special paragraph with a class" 的段落现在具有黄色背景，而其他段落则不受影响。

在此步骤中，我们将使用 ID 选择器 (ID selector)。ID 选择器比类选择器更加具体。它们用于选择具有特定 id 属性的唯一元素。ID 选择器以井号 (#) 开头，后跟元素的 ID。请记住，一个 ID 在单个 HTML 页面中必须是唯一的。

index.html 中的 <h1> 元素具有 id="main-title"。让我们来设置它的样式。

将以下 CSS 规则添加到你的 styles.css 文件中。这条规则将增大主标题的字体大小，并在其下方添加一条实线黑边。

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

保存文件并检查 Web 8080 标签。你应该会看到主标题 "Welcome to Our Page" 现在更大，并且下方有一条线。此样式仅适用于 ID 为 main-title 的元素。

在此步骤中，你将学习如何在不重复代码的情况下将相同的样式应用于多个选择器。通过用逗号分隔每个选择器，分组选择器 (grouping selector) 可以实现这一点。

假设我们想在页面上将相同的字体应用于 <h1> 和 <h2> 元素。与其编写两条独立的规则，不如将它们分组。

将以下 CSS 规则添加到你的 styles.css 文件中。

h1,
h2 {
  font-family: Arial, sans-serif;
}

这条规则指示浏览器将指定的 font-family 应用于所有 <h1> 元素和所有 <h2> 元素。

保存文件并刷新 Web 8080 标签。观察 "Welcome to Our Page" 和 "About CSS" 的字体是如何同时改变的。

在此步骤中，你将使用后代选择器 (descendant selector)。此选择器匹配指定元素的所有后代元素。后代选择器是通过列出两个或多个由空格分隔的选择器来创建的。

我们的 index.html 中有一个位于 <div> 内部的 <p> 元素。我们只想设置这个特定段落的样式，而不是页面上的其他段落。

将以下 CSS 规则添加到你的 styles.css 文件中。选择器 div p 将选择位于 <div> 元素内部任何位置的任何 <p> 元素。

div p {
  font-style: italic;
}

保存文件后，转到 Web 8080 标签。你将看到只有段落 "This paragraph is inside a div..." 现在是斜体。其他两个段落保持不变，因为它们不是 <div> 的后代。

恭喜你完成了本次实验！你已成功学习并应用了基础的 CSS 选择器来为网页设置样式。

在本次实验中，你练习了：

这些选择器是创建复杂且美观的网页布局的基石。现在你可以使用它们来精确控制 HTML 文档的外观。