偽類和偽元素都是添加到選擇器末的關鍵詞搬葬，不同的是
- 偽類：指定要選擇元素特殊狀態(tài)時的樣式羡宙。
: - 偽元素：允許對被選擇元素的特定部分修改樣式烁登。
:: - 偽類的操作對象是文檔樹中已有的元素贫导，偽元素創(chuàng)建了一個文檔樹外的元素抱完。
| 偽元素 | 用法 |
|---|---|
::first-letter |
選中塊級元素的第一行首字母 |
::first-line |
選擇塊級元素的第一行 |
::before |
創(chuàng)建一個偽元素贼陶，成為被選擇中元素的第一個子元素，默認行內(nèi)元素巧娱，通過content修飾內(nèi)容. |
::after |
不能應用在替換元素碉怔，如img video iframe canvas
|
::selection |
應用于文檔中被用戶高亮的部分，如被鼠標選中 |
::placeholder |
選擇表單元素中的占位文本 |
::backdrop |
全屏模式下渲染的頂層元素 |
::slotted |
選定被放在html模板中的元素禁添，只適用于影子節(jié)點樹撮胧，只始用于元素節(jié)點 |
::marker |
選擇列表的前置標記 |
| 偽類 | 用法 |
|---|---|
:link |
未訪問過 |
:visited |
已訪問過 |
:hover |
用戶鼠標懸停 |
:active |
被激活 |
:disabled |
表示被禁用的任何元素 |
:not |
用來匹配不符合一組選擇器的元素，防止特定的元素被選中 |
:out-of-range |
表示一個 <input> 元素上荡，其當前值處于屬性 min和max 限定的范圍外趴樱。 |
:in-range |
代表一個 <input> 元素，其當前值處于屬性min 和max 限定的范圍之內(nèi). |
:only-child |
匹配沒有任何兄弟元素的元素 |
:first-child |
表示在一組兄弟元素中的第一個元素 |
:last-child |
表示在一組兄弟元素中的最后一個元素 |
:only-of-type |
一個元素沒有其他相同類型的兄弟元素 |
:first-of-type |
表示一組兄弟元素中其類型的第一個元素 |
:nth-of-type() |
表示一組兄弟元素中其類型的第n個元素 |
:last-of-type |
表示一組兄弟元素中其類型的最后一個元素 |
:focus |
表示獲得焦點的元素（如表單輸入） |
:focus-within |
表示一個元素獲得焦點酪捡，或，該元素的后代元素獲得焦點 |
:valid |
內(nèi)容驗證正確的 input或form
|
:invalid |
未通過驗證的input 或form
|
@page :first |
打印文檔時纳账，第一頁的樣式 |
:target
|
選擇id與當前url hash片段匹配的元素 |
:required |
任意 <input> 元素表示任意擁有required屬性的 <input> 或 <textarea> 元素使用它 |
:optional |
表示任意沒有required屬性的 <input>逛薇，<select> 或 <textarea> 元素使用它 |
:root |
文檔樹的根元素 |
lang |
基于元素語言來匹配頁面元素 |
:empty |
表示沒有子元素的元素 |
:checked |
表示任何處于選中狀態(tài)的radio(<input type="radio">), checkbox (<input type="checkbox">) 或select 元素中的option
|
:default |
一組相關元素中的默認表單元素 |
優(yōu)先級 由高到低：
!important- 內(nèi)聯(lián)
- id
- 類/屬性/偽類
- 標簽/偽元素
