3.1 偽類 :first-child
CSS 中的結構偽類允許你根據元素在文檔樹中的位置選擇和樣式化元素。 這對於創建更精確和詳細的樣式特別有用，這些樣式應用於特定的元素。 讓我們看看偽類 :first-child, :last-child, :nth-child 和 :nth-of-type。
偽類 :first-child 選擇它的父元素的第一個子元素。這對於樣式化一組相似元素中的第一個元素非常有用，比如列表或段落。
語法：
選擇器:first-child {
屬性: 值;
}
使用範例
在這個例子中，列表的第一個元素用粗體和紅色顯示，div中的第一個段落被轉換為大寫：
/* 樣式化列表的第一個元素 */
li:first-child {
font-weight: bold;
color: red;
}
/* 樣式化 div 中的第一個段落 */
div p:first-child {
text-transform: uppercase;
}
3.2 偽類 :last-child
偽類 :last-child 選擇它的父元素的最後一個子元素。它用於樣式化一組相似元素中的最後一個元素。
語法：
選擇器:last-child {
屬性: 值;
}
使用範例
在這個例子中，列表的最後一個元素用斜體和藍色顯示，div中的最後一個段落被加底線：
/* 樣式化列表的最後一個元素 */
li:last-child {
font-style: italic;
color: blue;
}
/* 樣式化 div 中的最後一個段落 */
div p:last-child {
text-decoration: underline;
}
3.3 偽類 :nth-child
偽類 :nth-child 允許你根據元素在組中的位置選擇元素。它接受一個參數來決定選擇哪些元素。參數可以是數字、關鍵字或表達式。
語法：
選擇器nth-child(參數) {
屬性: 值;
}
參數：
- 數字: 選擇特定位置的元素
- 關鍵字:
odd（奇數）和even（偶數） - 表達式: 格式為
an+b，其中a和b是數字
範例 1: 選擇奇數元素
在這個例子中，所有奇數列表元素都被樣式化為淺灰色背景：
/* 樣式化奇數列表元素 */
li:nth-child(odd) {
background-color: #f0f0f0;
}
範例 2: 選擇特定位置的元素
在這個例子中，第三個列表元素用粗體和綠色顯示：
/* 樣式化第三個列表元素 */
li:nth-child(3) {
font-weight: bold;
color: green;
}
範例 3: 使用表達式
在這個例子中，從第一個開始，每隔一個元素就被樣式化為淺灰色背景：
/* 樣式化從第一個開始的每隔一個元素 */
li:nth-child(2n+1) {
background-color: #e0e0e0;
}
3.4 偽類 :nth-of-type
偽類 :nth-of-type 與 :nth-child 類似，但它根據它們在共同父元素中的類型選擇元素。 這允許你選擇特定類型的元素，即使它們不是父元素的第一個子元素。
語法：
選擇器:nth-of-type(參數) {
屬性: 值;
}
參數：
- 數字: 在同一類型的元素中選擇特定位置的元素
- 關鍵字:
odd（奇數）和even（偶數） - 表達式: 格式為
an+b，其中a和b是數字
範例 1: 選擇偶數段落
在這個例子中，所有偶數段落都被樣式化為淺灰色背景：
/* 樣式化偶數段落 */
p:nth-of-type(even) {
background-color: #d0d0d0;
}
範例 2: 在同一類型中選擇特定位置的元素
在這個例子中，第二個 h2 標題被放大並顯示為橙色：
/* 樣式化第二個 h2 標題 */
h2:nth-of-type(2) {
font-size: 2em;
color: orange;
}
範例 3: 使用表達式
在這個例子中，從第二個開始的每第三個列表元素被樣式化為淺灰色背景：
/* 樣式化從第二個開始的每第三個列表元素 */
li:nth-of-type(3n+2) {
background-color: #c0c0c0;
}
GO TO FULL VERSION