導入：
出來混，是要還的。之前跳過的知識點，以後的某一天都需要你加倍奉還。
最近寫僞類和僞元素的時候，老是搞混淆。也許是之前沒有記牢固吧，決定今天自己再理一遍。
這裏做一個類比：把上面圖片中的這個小人看作一個體，僞類就相當於他的肢體(手)，手和個體是整體，不能拆分。吃飽了(肚子變大了)這個狀態，就相當於他的狀態僞類。
僞元素就相當於他的書包，書包不屬於個體的一部分，是額外添加的。書包可以放在小孩的胸前，也可以放在小孩的背後；分別對應 ::before 和 ::after。書包中的書，對應僞元素的content 屬性。
第一部分：僞類
僞類分爲：結構性僞類和狀態僞類。
1、結構性僞類，就類比個體的肢體（手、腳…）
p 代表小孩
- p：first-child 選擇 p 元素的第一個子元素；// 小孩子的手
- p：last-child 選擇 p 元素的最後一個子元素； // 小孩子的腳
- P：nth-child(3n) 選擇 p 元素的一個或多個特定的子元素；// 小孩子手的第3、6、9根這三個手指
- P：nth-last-child(2) 選擇 p 元素的一個或多個特定的子元素；// 小孩子腳的第二根手指
———— 其他的結構性僞類
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最後一個同類子元素；
:only-child 選擇的元素是它的父元素的唯一一個子元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素裏面沒有任何內容。
2、狀態僞類
狀態僞類是基於元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。常見的狀態僞類主要包括：
- :link 應用於未被訪問過的鏈接；// 小孩子一個人安靜的時候
- :hover 應用於鼠標懸停到的元素；// 小孩子拿着筆，準備寫字的狀態
- :active 應用於被激活的元素（鼠標點擊和鬆開）；
- :visited 應用於被訪問過的鏈接，與:link互斥。// 有人探望小孩子的時候
- :focus 應用於擁有鍵盤輸入焦點的元素。
3、僞類的注意事項：
first-child 與 nth-child();
適合 p 元素的前面沒有兄弟元素的情況。否則 p:first-child 選擇不到元素，p:nth-child(2) 選取元素存在錯誤
![image]()
first-of-type 與 nth-of-type()
適合 p 元素的前面存在兄弟元素的情況。適用於前面有猴子的情況。first-of-type 先找出所有的 p 元素再找到第一個。
![image]()
第二部分：僞元素
1、僞元素：
- ::first-letter 選擇元素文本的第一個字（母）。
::first-line 選擇元素文本的第一行。
::before 在元素內容的最前面添加新內容。
::after 在元素內容的最後面添加新內容
第三部分：僞類和僞元素的區別：
僞類就類比小孩子的手、腳；這些本來就是小孩身體結構的一部分。而僞元素，就類比於書包，是額外添加的，不屬於小孩子身體結構的一部分。
總結：僞類操作的是文檔樹本身的元素，而僞元素操作的是文檔樹之外(額外添加,並不存在於文檔結構中)的元素。
注意：
有時你會發現僞元素使用了兩個冒號 (::) 而不是一個冒號 (:)，這是 CSS3 規範中的一部分要求，目的是爲了區分僞類和僞元素，大多數瀏覽器都支持這兩種表示方式。單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素。對於 CSS2 中已經有的僞元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。