CSS 選擇符
CSS 選擇符用於選擇要設定樣式的 HTML 元素。
CSS 選擇器
CSS 選擇符用於“查詢”（或選擇）要設定樣式的 HTML 元素。
我們可以將 CSS 選擇符分為五類
- 簡單選擇符（根據名稱、id、class 選擇元素）
- 組合選擇符（根據元素之間的特定關係選擇元素）
- 偽類選擇符（根據某種狀態選擇元素）
- 偽元素選擇符（選擇並設定元素的一部分樣式）
- 屬性選擇符（根據屬性或屬性值選擇元素）
本頁將解釋最基本的 CSS 選擇符。
CSS 元素選擇符
元素選擇符根據元素名稱選擇 HTML 元素。
CSS id 選擇符
id 選擇符使用 HTML 元素的 id 屬性來選擇特定元素。
元素的 id 在頁面內是唯一的，因此 id 選擇符用於選擇一個唯一的元素！
要選擇具有特定 id 的元素，請寫一個雜湊字元（#），後跟元素的 id。
注意： id 名稱不能以數字開頭！
CSS class 選擇符
class 選擇符選擇具有特定 class 屬性的 HTML 元素。
要選擇具有特定 class 的元素，請寫一個句點（.）字元，後跟 class 名稱。
示例
在此示例中，所有 class="center" 的 HTML 元素都將是紅色的並居中對齊：
.center {
text-align: center;
color: red;
}
自己動手試一試 »
您還可以指定只有特定 HTML 元素應受 class 的影響。
示例
在此示例中，只有 class="center" 的 <p> 元素才會是紅色的並居中對齊：
p.center {
text-align: center;
color: red;
}
自己動手試一試 »
HTML 元素也可以引用多個 class。
示例
在此示例中，<p> 元素將根據 class="center" 和 class="large" 進行樣式設定：
<p class="center large">此段落引用了兩個類。</p>
自己動手試一試 »
注意： class 名稱不能以數字開頭！
CSS 通用選擇符
通用選擇符 (*) 選擇頁面上的所有 HTML 元素。
CSS 分組選擇符
分組選擇符選擇具有相同樣式定義的 HTML 元素。
請看以下 CSS 程式碼（h1、h2 和 p 元素具有相同的樣式定義）
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}最好將選擇符分組，以最小化程式碼。
要分組選擇符，請用逗號分隔每個選擇符。
所有 CSS 簡單選擇符
| 選擇器 | 示例 | 示例描述 |
|---|---|---|
| #id | #firstname | 選擇 id="firstname" 的元素 |
| .class | .intro | 選擇所有 class="intro" 的元素 |
| element.class | p.intro | 僅選擇 class="intro" 的 <p> 元素 |
| * | * | 選擇所有元素 |
| 元素 | p | 選擇所有 <p> 元素 |
| element,element,.. | div, p | 選擇所有 <div> 元素和所有 <p> 元素 |
影片：CSS 簡單選擇符
