1.1 偽類
CSS 中的偽類 是一些特殊的關鍵字，附加在選擇器後面，用來指出狀態或在文檔樹中的位置。它們允許你在不需在 HTML 代碼中添加 classes 或 ids 的情況下，根據狀態或與其他元素的關係來設置元素樣式。
偽類的基本概念
-
定義元素的狀態：
- 偽類可以指出元素狀態，例如鼠標懸停、焦點或激活
-
定義元素的位置：
- 偽類可以指出元素相對於其父元素或其他元素的位置，比如第一個或最後一個元素
-
特殊情況和邏輯組：
- 偽類還可以定義特殊情況，例如第一個類型的元素或奇數/偶數元素
如何使用偽類
偽類通過使用冒號 (:) 附加在選擇器後面。它們可以與元素選擇器、classes、ids 及其他選擇器一起使用。
語法：
選擇器:偽類 {
屬性: 值;
}
使用範例
1. 帶有偽類的元素選擇器
在此範例中，所有第一個段落 (<p>) 的父元素將會是粗體：
CSS
p:first-of-type {
font-weight: bold;
}
2. 帶有偽類的 class 選擇器
在此範例中，所有 class 為 .button 的元素在鼠標懸停時背景會變成藍色：
CSS
.button:hover {
background-color: blue;
}
3. 結合偽類的選擇器
在此範例中，class 為 .container 的元素中的所有偶數段落 (<p>) 將會是紅色：
CSS
.container > p:nth-child(2n) {
color: red;
}
1.2 偽類範例及其應用
1. 定義狀態的偽類
定義元素狀態的偽類允許依據用戶互動或元素狀態來改變其樣式。
CSS
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}
2. 定義位置的偽類
定義元素位置的偽類允許根據元素在 DOM 結構中的位置來套用樣式。
CSS
li:first-child {
font-style: italic;
}
li:last-child {
font-style: italic;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: #ffffff;
}
3. 用於邏輯組的偽類
這些偽類允許根據其邏輯組或類型來設置元素樣式。
CSS
input:checked {
background-color: yellow;
}
input:disabled {
background-color: grey;
}
input:enabled {
background-color: white;
}
GO TO FULL VERSION