9. 从《蜀道难》学CSS基础：三种选择器的实战解析

引言：当古诗遇上现代网页设计

今天我们通过李白的经典诗作《蜀道难》来学习CSS的三种核心选择器。这种古今结合的学习方式，既能感受中华诗词的魅力，又能掌握实用的网页设计技能。让我们开始这场穿越时空的技术之旅吧！

一、HTML骨架搭建

首先，我们来看网页的基本结构：

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. 元素选择器 - 批量设置样式

css 复制代码

h1 {
    color: yellowgreen;
}

p {
    background-color: pink;
}

效果：

所有<h1>标签文字变为黄绿色
所有<p>标签背景变为粉色

特点：

语法：标签名 { 样式规则 }
作用于页面中所有同名元素
适合批量设置相同元素的样式

2. ID选择器 - 唯一标识的元素

css 复制代码

#p1 {
    font-size: 20px;
}

效果：

只有id="p1"的段落文字变为20像素大小

特点：

语法：#id值 { 样式规则 }
每个ID在页面中必须唯一
优先级高于元素选择器
适合设置页面中唯一元素的样式

3. 类选择器 - 共享样式的元素

css 复制代码

.color_red {
    color: red;
    background-color: #fff;
}

效果：

所有class="color_red"的元素文字变为红色，背景变为白色
包括第二个<h2>和第三个<p>标签

特点：

语法：.类名 { 样式规则 }
多个元素可以共享同一个类
一个元素可以有多个类（用空格分隔）
适合设置需要重复使用的样式

三、样式应用实例分析

让我们看看这些选择器在实际古诗排版中的效果：

1. 标题样式：

html 复制代码

<h1>蜀道难</h1>

css 复制代码

h1 { color: yellowgreen; }

标题文字变为黄绿色，突出显示

2. 作者信息：

html 复制代码

<h2 class="color_red itcalic">作者 李白</h2>

使用了两个类：color_red和itcalic
文字变为红色，背景白色

3. 特色段落：

html 复制代码

<p id="p1">噫吁嚱 ！危乎高哉 ！</p>

css 复制代码

#p1 { font-size: 20px; }

首段文字放大，吸引读者注意

4. 诗句排版：

html 复制代码

<p>蜀道之难 难于上青天 蚕丛及鱼凫 开国何茫然</p>
<p class="color_red">尔来四万八千岁 不与秦塞通人烟</p>

第一段使用默认样式
第二段使用红色文字和白色背景，形成视觉对比

四、选择器优先级规则

在上面的例子中，我们其实已经隐含地接触到了CSS优先级的概念：

ID选择器 > 类选择器 > 元素选择器
当样式冲突时，优先级高的选择器会生效
可以通过!important强制覆盖（但不推荐滥用）

例如，如果我们这样写：

css 复制代码

p { color: blue; }
#p1 { color: green; }
.color_red { color: red; }

普通段落会是蓝色
id="p1"的段落会是绿色（覆盖蓝色）
class="color_red"的段落会是红色（除非同时有ID选择器覆盖）