介紹
偽類和偽元素是CSS中基礎概念，::before，::after這兩個大家應該用的比較多了。今天把偽類和偽元素重新做了一個整理。
區別
首先，偽類和偽元素是兩個東西，這個從名字也能看出來。那麼它們的區別是什麼呢？
準確來說偽類他是不是一個元素，它是屬於某一個元素的某一個狀態。比如:hover，:active，:first-child。
而偽元素它是更像一個Element，用於在DOM中增加一個特殊的element節點，比如::after, ::before, ::first-line等。
偽類
| 偽類 | 描述 |
|---|---|
:active | 在使用者啟用（例如點選）元素的時候匹配。 |
:any-link | 匹配一個連結的:link和:visited狀態。 |
:autofill | 匹配<input>元素等表單元素是由autocomplete填充時的樣式。 |
:checked | 匹配處於選中狀態的單選或者核取方塊。 |
:default | 匹配一組相似的元素中預設的一個或者更多的 UI 元素。 |
:disabled | 匹配處於關閉狀態的使用者介面元素 |
:empty | 匹配除了可能存在的空格外，沒有子元素的元素。 |
:enabled | 匹配處於開啟狀態的使用者介面元素。 |
:first-child | 匹配兄弟元素中的第一個元素。 |
:first-of-type | 匹配兄弟元素中第一個某種型別的元素。 |
:focus | 當一個元素有焦點的時候匹配。 |
:focus-visible | 當元素有焦點，且焦點對使用者可見的時候匹配。 |
:focus-within | 匹配有焦點的元素，以及子代元素有焦點的元素。 |
:hover | 當使用者懸浮到一個元素之上的時候匹配。 |
:indeterminate | 匹配未定態值的 UI 元素，通常為核取方塊，單選框。 |
:invalid | 匹配諸如<input>的任意內容未透過驗證狀態。 |
:last-child | 匹配兄弟元素中最末的那個元素。 |
:last-of-type | 匹配兄弟元素中最後一個某種型別的元素。 |
:link | 匹配未曾訪問的連結。 |
:is() | 匹配傳入的選擇器列表中的任何選擇器。 |
:not | 匹配作為值傳入自身的選擇器未匹配的物件。 |
:nth-child | 匹配兄弟元素中的元素(可以是非同類元素)<br/>兄弟元素按照an+b形式的式子進行匹配 |
:nth-of-type | 匹配某種型別的一列兄弟元素。<br/>兄弟元素按照an+b形式的式子進行匹配 |
:nth-last-child | 匹配一列兄弟元素(可以是非同類元素)，從後往前倒數。<br/>兄弟元素按照an+b形式的式子進行匹配 |
:nth-last-of-type | 匹配某種型別的一列兄弟元素，從後往前倒數。 |
:only-child | 匹配沒有兄弟元素的元素。 |
:only-of-type | 匹配兄弟元素中某型別僅有的元素。 |
:optional | 匹配不是必填的 form 元素。 |
:read-only | 匹配使用者不可更改的元素。 |
:read-write | 匹配使用者可更改的元素。 |
:required | 匹配必填的 form 元素。 |
:valid | 匹配諸如<input>元素的處於可用狀態的元素。 |
:target | 匹配當前 URL 目標的元素（例如如果它有一個匹配當前URL 分段的元素）。 |
:visited | 匹配已訪問連結。 |
偽元素
| 偽元素 | 描述 |
|---|---|
::after | 匹配出現在原有元素的實際內容之後的一個可樣式化元素。 |
::before | 匹配出現在原有元素的實際內容之前的一個可樣式化元素。 |
::first-letter | 匹配元素的第一個字母。 |
::first-line | 匹配包含此偽元素的元素的第一行。 |
::selection | 匹配檔案中被選擇的那部分。 |
::placeholder | 匹配一個表單元素的佔位文字 |
最後
具體怎麼寫這裡就不一個一個羅列了。 網上一搜就有的。主要是有哪些偽類偽元素需要有個概念，方便專案中用到能想起來。
結束
好了，本文到此結束，希望本文對你有所幫助 :-)
最近新弄了一個公眾號：寫程式碼的浩，求關注 ?。後面會逐步把掌握的前端知識以及職場知識沉澱下來。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。