偽類和偽元素，作為一個前端肯定是都用過。然後，你問下自己到底什麼是偽類？什麼是偽元素？兩者真正區別又是什麼？是不是突然一股懵逼湧上心頭……
對於什麼是偽類，什麼是偽元素，一些小夥伴會知道，偽類是一個冒號的，偽元素是兩個冒號的；又或者，偽類是類似於:hover這樣的，偽元素是類似於:before或::before這樣的。然後，對於這樣的回答，肯定是不能令自己滿意的。我們今天就徹底聊一聊偽類和偽元素吧。
偽類，什麼是偽類？
看下w3c對於偽類的定義：
CSS偽類是用來新增一些選擇器的特殊效果。
偽類是基於元素的特徵而不是他們的id、class、屬性或者內容。由於狀態的變化是非靜態的，所以元素達到一個特定狀態時，它可能得到一個偽類的樣式，所以它是基於文件之外的抽象。
先說偽類的用法：
是一個以冒號:作為字首，被新增到一個選擇器末尾的關鍵字，例如：:active :hover :link :visited。
css中的偽類及其功能描述
| 偽類 | 描述 | level |
|---|---|---|
| :link | 用來選中元素當中的連結。它將會選中所有尚未訪問的連結。遵循LVHA順序 | 1 |
| :visited | 表示使用者已訪問過的連結。遵循LVHA順序 | 1 |
| :active | 匹配被使用者啟用的元素。即滑鼠主鍵按下的元素或者tab鍵選中的元素，並不限於a和button。遵循LVHA順序 |
1 |
| :lang() | 基於元素語言來匹配頁面元素,eg:p:lang(en) |
2 |
| :first-child | 一組兄弟元素中的第一個元素 | 2 |
| :focus | 表示獲得焦點的元素 | 2 |
| :hover | 滑過元素時，pc端指滑鼠，移動端指觸控（通常會有bug） | 2 |
| :target | 代表一個唯一的頁面元素(目標元素)。例如：http://www.example.com/index.html#section2該片段指向一個ID為section2的頁面元素 |
3 |
| :root | 匹配文件樹的根元素,除了優先順序更高之外，與html選擇器相同 |
3 |
| :nth-child() | 找到所有當前元素的兄弟元素中符合條件的元素，例如2n+1就是查詢1，3，5，7等 | 3 |
| :nth-of-type() | 查詢符合條件的相同元素型別的兄弟元素 | 3 |
| :nth-last-of-type() | 從後往前查詢符合條件的相同型別的兄弟元素 | 3 |
| :last-child | 一組兄弟元素中的最後一個元素 | 3 |
| :first-of-type | 一組兄弟元素中的具有相同元素型別的第一個元素 | 3 |
| :last-of-type | 一組兄弟元素中的具有相同元素型別的最後一個元素 | 3 |
| :only-child | 唯一的一個子元素 | 3 |
| :only-of-type | 代表了任意一個元素，這個元素沒有其他相同型別的兄弟元素 | 3 |
| :empty | 代表沒有子元素的元素，子元素有空格和文字都不行，但可以是註釋 | 3 |
| :not() | 它匹配不符合引數選擇器描述的元素，不能包含另一個not選擇器 | 3 |
| :enabled | 表示任何啟用的（enabled）元素。如果一個元素能夠被啟用或獲取焦點，則該元素是啟用的 | 3 |
| :disabled | 表示任何被禁用的元素 | 3 |
| :checked | 表示任何處於選中狀態的radio/checkbox |
3 |
| :indeterminate | 表示狀態不確定的表單元素 | 3 |
| :default | 表示一組相關元素中的預設表單元素 | 3 |
| :valid | 表示任意內容通過驗證的<input>或其他 <form>元素 |
3 |
| :invalid | 表示任意內容未通過驗證的<input>或其他 <form>元素 |
3 |
| :in-range | 代表一<input> 元素，其當前值處於屬性min 和max 限定的範圍之內 |
3 |
| :out-of-range | 代表一個<input>元素，其當前值處於屬性min 和max 限定的範圍外 |
3 |
| :required | 表示任意擁有required屬性的<input> 或<textarea> |
3 |
| :optional | 表示任意沒有required屬性的 <input>``<select>或<textarea> |
3 |
| :read-only | 表示元素不可被使用者編輯的狀態 | 3 |
| :read-write | 代表一個元素可以被使用者編輯 | 3 |
這裡只列舉到css3級別的偽類，css4目前還未在個大瀏覽器統一實現，暫不列舉說明。
LVHA順序：:link — :visited — :hover — :active，在使用這些偽類的時候，要保證元素的樣式被正確渲染，請確保其css樣式的書寫書寫按照這個順序。
對於偽類，其實可以理解為是元素的一個狀態，我們可以為這個狀態新增一些樣式。比如div的滑過狀態div:hover{}，輸入框的聚焦狀態input:focus {}，又或者a標籤的訪問過的狀態a:visited {}
但是對於偽類
偽元素，什麼是偽元素？
偽元素是創造DOM之外的物件
偽元素可以為一些在源文件中不存在的內容分配樣式。
偽元素的內容實際上和普通DOM元素是相同的，但是它本身只是基於元素的抽象，並不存在於文件中，所以叫偽元素。
偽元素的用法：
是2個以冒號::作為字首，被新增到一個選擇器末尾的關鍵字，例如：::before 或者 ::after。
css中的偽元素及其功能描述
| 偽元素 | 功能描述 | level |
|---|---|---|
| ::after | 用來建立一個偽元素，作為已選中元素的最後一個子元素。通常會配合content屬性來為該元素新增裝飾內容。這個虛擬元素預設是行內元素 | 2 |
| ::before | 建立一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素新增修飾性的內容。此元素預設為行內元素。 | 2 |
| ::first-letter | 選中某塊級元素第一行的第一個字母，並且文字所處的行之前沒有其他內容 | 1 |
| ::first-line | 在某塊級元素的第一行應用樣式。第一行的長度取決於很多因素，包括元素寬度，文件寬度和文字的文字大小 | 1 |
| ::selection | 應用於文件中被使用者高亮的部分 | 4，WD草案 |
偽元素before和:after的使用場景
在一些主流的css框架中，例如Bootstrap，對於這兩個偽元素的使用還是蠻多的。我們在日常開發中也經常使用這兩個元素進行一些妙用。
- 清除浮動
- 寫一個三角形/或者一個tip框
- 寫一個箭頭/叉 …… 這些都是很常見的一些小效果，當然還有其他更有意思的效果。這裡就不多做贅述了，有興趣的小夥伴可以試著寫一寫。
總結一下：
- 偽類的受體是文件樹中已有的元素，而偽元素則創立了一個DOM外的元素
- 偽類用於新增元素的特殊效果，而偽元素則是新增元素的內容
- 偽類使用一個冒號（例如:hover），css3標準偽元素使用兩個冒號（例如::before)，css2中的沒有區分偽類和偽元素的用法，因此css2中偽元素也可以使用一個冒號。
- PC端更推薦單冒號寫法，移動端更推薦雙冒號寫法
- before/after偽元素需要配合content屬性使用
- 偽類更常用於一些簡單的動畫或互動的樣式，例如滑入滑出等，而偽元素更常用於字型圖示、清除浮動等
