引言：當古詩遇上現代網頁設計
今天我們通過李白的經典詩作《蜀道難》來學習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選擇器覆蓋）
)
![LeetCode[226] 翻轉二叉樹](http://pic.xiahunao.cn/LeetCode[226] 翻轉二叉樹)
