CSS 選擇器
CSS 選擇器
CSS 選擇器用于“查找”（或選取）要設置樣式的 HTML 元素。
我們可以將 CSS 選擇器分為五類：
- 簡單選擇器（根據名稱、id、類來選取元素）
- 組合器選擇器（根據它們之間的特定關系來選取元素）
- 偽類選擇器（根據特定狀態選取元素）
- 偽元素選擇器（選取元素的一部分并設置其樣式）
- 屬性選擇器（根據屬性或屬性值來選取元素）
此頁會講解最基本的 CSS 選擇器。
CSS 元素選擇器
元素選擇器根據元素名稱來選擇 HTML 元素。
實例
在這里，頁面上的所有 <p> 元素都將居中對齊，并帶有紅色文本顏色：
p {
text-align: center;
color: red;
}
CSS id 選擇器
id 選擇器使用 HTML 元素的 id 屬性來選擇特定元素。
元素的 id 在頁面中是唯一的，因此 id 選擇器用于選擇一個唯一的元素！
要選擇具有特定 id 的元素，請寫一個井號（＃），后跟該元素的 id。
實例
這條 CSS 規則將應用于 id="para1" 的 HTML 元素：
#para1 {
text-align: center;
color: red;
}
注意：id 名稱不能以數字開頭。
CSS 類選擇器
類選擇器選擇有特定 class 屬性的 HTML 元素。
如需選擇擁有特定 class 的元素，請寫一個句點（.）字符，后面跟類名。
實例
在此例中，所有帶有 class="center" 的 HTML 元素將為紅色且居中對齊：
.center {
text-align: center;
color: red;
}
您還可以指定只有特定的 HTML 元素會受類的影響。
實例
在這個例子中，只有具有 class="center" 的 <p> 元素會居中對齊：
p.center {
text-align: center;
color: red;
}
HTML 元素也可以引用多個類。
實例
在這個例子中，<p> 元素將根據 class="center" 和 class="large" 進行樣式設置：
<p class="center large">這個段落引用兩個類。</p>
注意：類名不能以數字開頭！
CSS 通用選擇器
通用選擇器（*）選擇頁面上的所有的 HTML 元素。
實例
下面的 CSS 規則會影響頁面上的每個 HTML 元素：
* {
text-align: center;
color: blue;
}
CSS 分組選擇器
分組選擇器選取所有具有相同樣式定義的 HTML 元素。
請看下面的 CSS 代碼（h1、h2 和 p 元素具有相同的樣式定義）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好對選擇器進行分組，以最大程度地縮減代碼。
如需對選擇器進行分組，請用逗號來分隔每個選擇器。
實例
在這個例子中，我們對上述代碼中的選擇器進行分組：
h1, h2, p {
text-align: center;
color: red;
}
所有簡單的 CSS 選擇器
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| .class | .intro | 選取所有 class="intro" 的元素。 |
| #id | #firstname | 選取 id="firstname" 的那個元素。 |
| * | * | 選取所有元素。 |
| element | p | 選取所有 <p> 元素。 |
| element,element,.. | div, p | 選取所有 <div> 元素和所有 <p> 元素。 |
延伸閱讀
課外書：CSS 元素選擇器
課外書：CSS 選擇器分組
課外書：CSS 類選擇器詳解
課外書：CSS ID 選擇器詳解
課外書：CSS 屬性選擇器詳解
課外書：CSS 后代選擇器
課外書：CSS 子元素選擇器
課外書：CSS 相鄰兄弟選擇器
