在本实验中，学生将探索网页开发中使用的基本 CSS 选择器，重点学习用于样式化网页元素的实用技术。实验通过动手实践的方式，帮助理解不同 CSS 选择器的工作原理，从基本的标签选择器开始，逐步深入到更具体的选择方法，如类和 ID 选择器。
参与者将学习如何创建一个 HTML 文件，应用标签选择器统一样式化元素，使用类选择器进行针对性样式化，以及利用 ID 选择器对单个元素进行唯一修改。实验还涵盖了 CSS 选择器优先级和 !important 规则等重要概念，使学生能够全面掌握如何通过 CSS 样式技术有效控制和自定义网页设计。
在这一步中，你将学习如何创建一个 HTML 文件并在 CSS 中应用基本的标签选择器。标签选择器是通过目标元素的标签名称来样式化 HTML 元素的基本方法。
首先，让我们在项目目录中创建一个 HTML 文件。打开 WebIDE 并导航到 ~/project 目录。创建一个名为 index.html 的新文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Tag Selector Example</title>
<style>
/* We'll add CSS here */
</style>
</head>
<body>
<h1>Welcome to CSS Selectors</h1>
<p>This is a paragraph about CSS tag selectors.</p>
<div>This is a div element.</div>
</body>
</html>现在，让我们应用标签选择器来样式化我们的 HTML 元素。在 <style> 标签内添加以下 CSS：
/* Tag selector for h1 */
h1 {
color: blue;
text-align: center;
}
/* Tag selector for p */
p {
font-size: 16px;
color: green;
}
/* Tag selector for div */
div {
background-color: lightgray;
padding: 10px;
}当你保存并在浏览器中打开此文件时，你将看到：
<h1> 元素将显示为蓝色并居中<p> 元素将显示为绿色，字体大小为 16px<div> 元素将具有浅灰色背景和内边距浏览器中的示例输出：
在这一步中，你将学习如何在 CSS 中使用类选择器来样式化具有共享类属性的多个元素。与标签选择器相比，类选择器提供了更大的灵活性，允许你为特定的元素组应用样式。
在 WebIDE 中打开上一步中的 index.html 文件。修改 HTML 以包含类属性：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Class Selector Example</title>
<style>
/* We'll add class selectors here */
</style>
</head>
<body>
<h1 class="main-title">Welcome to CSS Class Selectors</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a normal paragraph.</p>
<div class="highlight">This is a highlighted div.</div>
</body>
</html>现在，在你的 CSS 中添加类选择器，以样式化具有特定类的元素：
/* Class selector for .highlight */
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
padding: 5px;
}
/* Class selector for .main-title */
.main-title {
color: blue;
text-align: center;
font-size: 24px;
}当你保存并在浏览器中打开此文件时，你将看到：
highlight 类的元素将具有黄色背景highlight 类的元素才会具有特殊样式浏览器中的示例输出：
在这一步中，你将学习 ID 选择器，它用于样式化网页上的唯一单个元素。与可以应用于多个元素的类选择器不同，ID 选择器针对特定的单个元素。
在 WebIDE 中打开上一步中的 index.html 文件。修改 HTML 以包含 ID 属性：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS ID Selector Example</title>
<style>
/* We'll add ID selectors here */
</style>
</head>
<body>
<h1 class="main-title">Welcome to CSS ID Selectors</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p id="special-paragraph">This is a unique paragraph with an ID.</p>
<div class="highlight" id="main-content">
This is a highlighted div with an ID.
</div>
</body>
</html>现在，在你的 CSS 中添加 ID 选择器，以样式化特定元素：
/* ID selector for #special-paragraph */
#special-paragraph {
color: purple;
font-style: italic;
border-bottom: 2px solid green;
}
/* ID selector for #main-content */
#main-content {
background-color: lightblue;
padding: 10px;
font-weight: bold;
}当你保存并在浏览器中打开此文件时，你将看到：
special-paragraph 的段落将显示为紫色、斜体，并带有绿色底部边框main-content 的 div 将具有浅蓝色背景和加粗文本浏览器中的示例输出：
在这一步中，你将学习 CSS 选择器的特异性（specificity），以及当多个选择器针对同一元素时，不同类型的选择器如何被优先应用。理解选择器优先级有助于你控制在多个选择器同时作用于同一元素时，哪些样式会被应用。
在 WebIDE 中打开上一步中的 index.html 文件。更新 HTML 和 CSS 以演示选择器优先级：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selector Priorities</title>
<style>
/* We'll demonstrate selector priorities here */
</style>
</head>
<body>
<div id="priority-demo" class="highlight">
<p>Understanding CSS Selector Priorities</p>
</div>
</body>
</html>现在，添加 CSS 以展示不同选择器的优先级：
/* Tag selector (lowest priority) */
p {
color: green;
font-size: 16px;
}
/* Class selector (medium priority) */
.highlight {
color: blue;
border: 2px solid gray;
}
/* ID selector (highest priority) */
#priority-demo {
color: red;
font-weight: bold;
}
/* Inline styles would have the highest priority (not shown in this example) */选择器优先级层次（从低到高）：
当你保存并在浏览器中打开此文件时，你将看到：
浏览器中的示例输出：
!important 规则在这一步中，你将学习 CSS 中的 !important 规则，这是一种强大的方式，可以覆盖所有其他样式规则。虽然应谨慎使用，但在特定情况下它可能会很有帮助。
在 WebIDE 中打开上一步中的 index.html 文件。更新 HTML 以演示 !important 规则：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS !important Rule</title>
<style>
/* We'll demonstrate the !important rule here */
</style>
</head>
<body>
<div id="important-demo" class="highlight">
<p>Understanding the !important CSS Rule</p>
</div>
</body>
</html>现在，添加 CSS 以展示 !important 规则如何覆盖其他选择器：
/* Normal tag selector */
p {
color: green;
font-size: 16px;
}
/* Class selector */
.highlight {
color: blue;
border: 2px solid gray;
}
/* ID selector */
#important-demo {
color: red;
}
/* !important rule (highest priority) */
p {
color: purple !important;
font-weight: bold !important;
}关于 !important 规则的关键点：
当你保存并在浏览器中打开此文件时，你将看到：
!important 规则优先于其他选择器浏览器中的示例输出：
!important 如何覆盖其他样式规则在本实验中，参与者探索了用于网页开发的基本 CSS 选择器技术，从使用基本标签选择器样式化 HTML 元素（如标题、段落和 div 容器）开始。通过应用颜色、对齐方式、字体大小和背景属性，学习者获得了使用标签名称定位特定 HTML 元素的实践经验。
实验逐步引入了更高级的选择器方法，展示了类选择器如何通过允许多个元素的定向样式化来提供更大的样式灵活性。通过动手练习，参与者学习了如何动态创建和应用 CSS 样式，理解了选择器层次结构的核心原则以及精确元素定位在网页设计中的重要性。
