CSS 程式札記 : 偽類與偽元素

本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。

CSS 偽類 (Pseudo-classes)

偽類是一種用來定義元素特定狀態的樣式規則，它們以冒號（:）開頭，後接特定的關鍵字，常見的偽類包括：

• :hover：當鼠標懸停在元素上時，應用樣式。
• :active：當元素被激活（例如，點擊）時，應用樣式。
• :focus：當元素獲得焦點（例如，通過鍵盤導航）時，應用樣式。
• :nth-child()：根據元素在其父元素中的位置來選擇並應用樣式。

a:hover {
    color: red; /* 當鼠標懸停在鏈接上時，改變鏈接的文字顏色為紅色 */
}

input:focus {
    border: 2px solid blue; /* 當輸入框獲得焦點時，改變其邊框顏色為藍色 */
}

button:active {
    background-color: yellow; /* 當按鈕被點擊時，改變其背景顏色為黃色 */
}

li:nth-child(odd) {
    background-color: lightgray; /* 選擇列表中的奇數項，並將其背景顏色設為淺灰色 */
}

:nth-child() 詳細介紹

:nth-child() 可以根據其在父元素中的順序選擇元素。它的語法為 :nth-child(an+b)，其中 a 和 b 是整數，可以是正數、負數或零。

• :nth-child(odd)：選擇奇數項。
• :nth-child(even)：選擇偶數項。
• :nth-child(3n)：每隔三個元素選擇一個元素，從第三個元素開始。
• :nth-child(4n+1)：每隔四個元素選擇一個元素，從第一個元素開始。

CSS 偽元素 (Pseudo-elements)

偽元素用於選擇並樣式化元素的特定部分，它們以兩個冒號（::）開頭，後接特定的關鍵字，常見的偽元素包括：

• ::before：在元素內容之前插入內容。
• ::after：在元素內容之後插入內容。
• ::first-letter：選擇並樣式化元素的第一個字母。
• ::first-line：選擇並樣式化元素的第一行文本。

div::before {
    content: "【開頭】"; /* 在 div 元素的內容開始之前插入文本 "【開頭】" */
    color: red; /* 將插入的文本顏色設為紅色 */
}

div::after {
    content: "【結束】"; /* 在 div 元素的內容結束之後插入文本 "【結束】" */
    color: blue; /* 將插入的文本顏色設為藍色 */
}

p::first-letter {
    font-size: 2em; /* 將段落的第一個字母的字體大小設為原來的兩倍 */
    color: green; /* 將段落的第一個字母的顏色設為綠色 */
}

p::first-line {
    font-weight: bold; /* 將段落的第一行文字設為粗體 */
}

偽類與偽元素的區別

雖然偽元素和偽類都是用來擴展 CSS 選擇器的功能，但它們有一些關鍵的區別：

1. 定義範圍：偽類用於描述元素的特定狀態，而偽元素用於選擇元素的特定部分。
2. 語法：偽類以一個冒號（:）開頭，而偽元素以兩個冒號（::）開頭。
3. 應用範圍：偽類可以應用於任何元素，而偽元素通常用於添加裝飾性內容或樣式化特定的文本部分。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡