偽類和偽元素是 CSS 中的兩種概念。偽類能夠在特定動作時改變 DOM 的 CSS 樣式，偽元素則是基於原有的 DOM ，創建另一個可設定不同 CSS 的 DOM 屬性。

偽類用來定義元素的特殊狀態,以便應用不同的樣式。常見的偽類有:

• :hover - 當使用者的滑鼠移到元素上時套用的樣式
• :active - 當元素被激活時(例如被點擊)套用的樣式
• :focus - 當元素獲得鍵盤焦點時套用的樣式
• :visited - 已被造訪過的連結套用的樣式
• :nth-child - 選擇父元素的第n個子元素

使用偽類的語法是在選擇器後加上冒號(:)再加上偽類名稱。

偽元素則可以讓您創建一些實際上不存在於文件中的元素,並對其加以樣式化。常見的偽元素有:

• ::before - 在元素内容前插入的偽元素
• ::after - 在元素内容後插入的偽元素
• ::first-line - 元素的第一行
• ::first-letter - 元素的第一個字母
• ::selection - 元素被選取時的部分

使用偽元素的語法是在選擇器後加上兩個冒號(::)再加上偽元素名稱。

偽類和偽元素讓CSS有更大的可塑性,可以在不改動HTML結構的情況下創建各種視覺效果。它們已經成為現代前端開發不可或缺的一部分。

在這例舉一些應用的例子:

偽類:

• a:hover {color: red;} - 將滑鼠移到連結上時文字變紅色

• input:focus {border: 2px solid blue;} - 將輸入框獲得焦點時外框變成藍色

• li:nth-child(2n) {background: #eee;} - 將列表中的偶數行背景設定為灰色

偽元素:

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

• h1::before {content: "# ";} - 在H1標題前加入 # 符號

• p::after {content: " \eau3";} - 在段落後加入unicode編碼文字

• ::selection {background: yellow;} - 選取文字時背景變黃色

這些只是一些簡單的例子,偽類和偽元素的應用非常廣泛,可以做出各種視覺效果。結合JavaScript還可以做出非常進階的互動功能。