9. 从《蜀道难》学CSS基础：三种选择器的实战解析
引言：当古诗遇上现代网页设计
今天我们通过李白的经典诗作《蜀道难》来学习CSS的三种核心选择器。这种古今结合的学习方式，既能感受中华诗词的魅力，又能掌握实用的网页设计技能。让我们开始这场穿越时空的技术之旅吧！
一、HTML骨架搭建
首先，我们来看网页的基本结构：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css简介</title><style>/* CSS代码将在这里书写 */</style>
</head>
<body><h1>蜀道难</h1><h2 class="color_red itcalic">作者 李白</h2><p id="p1">噫吁嚱 ！危乎高哉 ！</p><p>蜀道之难 难于上青天 蚕丛及鱼凫 开国何茫然</p><p class="color_red">尔来四万八千岁 不与秦塞通人烟</p>
</body>
</html>
关键点解析：
<!DOCTYPE html>声明文档类型<html>根元素，lang=“en” 指定语言<head>包含元数据和样式表<body>包含网页可见内容- 我们使用了
<h1>、<h2>和<p>三种标签来组织内容
二、CSS选择器详解
1. 元素选择器 - 批量设置样式
h1 {color: yellowgreen;
}p {background-color: pink;
}
效果：
- 所有
<h1>标签文字变为黄绿色 - 所有
<p>标签背景变为粉色
特点：
- 语法：标签名 { 样式规则 }
- 作用于页面中所有同名元素
- 适合批量设置相同元素的样式
2. ID选择器 - 唯一标识的元素
#p1 {font-size: 20px;
}
效果：
- 只有id="p1"的段落文字变为20像素大小
特点：
- 语法：#id值 { 样式规则 }
- 每个ID在页面中必须唯一
- 优先级高于元素选择器
- 适合设置页面中唯一元素的样式
3. 类选择器 - 共享样式的元素
.color_red {color: red;background-color: #fff;
}
效果：
- 所有class="color_red"的元素文字变为红色，背景变为白色
- 包括第二个
<h2>和第三个<p>标签
特点：
- 语法：.类名 { 样式规则 }
- 多个元素可以共享同一个类
- 一个元素可以有多个类（用空格分隔）
- 适合设置需要重复使用的样式
三、样式应用实例分析
让我们看看这些选择器在实际古诗排版中的效果：
1. 标题样式：
<h1>蜀道难</h1>
h1 { color: yellowgreen; }
- 标题文字变为黄绿色，突出显示
2. 作者信息：
<h2 class="color_red itcalic">作者 李白</h2>
- 使用了两个类：color_red和itcalic
- 文字变为红色，背景白色
3. 特色段落：
<p id="p1">噫吁嚱 ！危乎高哉 ！</p>
#p1 { font-size: 20px; }
- 首段文字放大，吸引读者注意
4. 诗句排版：
<p>蜀道之难 难于上青天 蚕丛及鱼凫 开国何茫然</p>
<p class="color_red">尔来四万八千岁 不与秦塞通人烟</p>
- 第一段使用默认样式
- 第二段使用红色文字和白色背景，形成视觉对比
四、选择器优先级规则
在上面的例子中，我们其实已经隐含地接触到了CSS优先级的概念：
- ID选择器 > 类选择器 > 元素选择器
- 当样式冲突时，优先级高的选择器会生效
- 可以通过!important强制覆盖（但不推荐滥用）
例如，如果我们这样写：
p { color: blue; }
#p1 { color: green; }
.color_red { color: red; }
- 普通段落会是蓝色
- id="p1"的段落会是绿色（覆盖蓝色）
- class="color_red"的段落会是红色（除非同时有ID选择器覆盖）