CSS 引入偽類和偽元素概念是為了格式化文檔樹(shù)以外的信息了嚎。
偽元素和偽類都不會(huì)出現(xiàn)在源文檔或者文檔樹(shù)中
偽類的操作對(duì)象是文檔樹(shù)中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。
1. CSS 偽類
偽類是選擇器的一種，它用于選擇處于特定狀態(tài)的元素畅涂，比如當(dāng)它們是這一類型的第一個(gè)元素時(shí)，或者是當(dāng)鼠標(biāo)指針懸浮在元素上面的時(shí)候道川。
偽類表現(xiàn)得會(huì)像是你向你的文檔的某個(gè)部分應(yīng)用了一個(gè)類一樣，在標(biāo)記文本中減少多余的類，讓代碼更靈活冒萄、更易于維護(hù)臊岸。
偽類就是開(kāi)頭為冒號(hào)的關(guān)鍵字：
/* 語(yǔ)法 */
selector:pseudo-class {
property: value;
}
/* 比如：所有用戶指針懸停的按鈕 */
button:hover {
color: blue;
}
2. 偽元素
偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式尊流。表現(xiàn)得是像你往標(biāo)記文本中加入全新的 HTML 元素一樣帅戒。
偽元素開(kāi)頭為雙冒號(hào)::。
/* 語(yǔ)法 */
selector::pseudo-element {
property: value;
}
/* 每一個(gè) <p> 元素的第一行崖技。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
3. 偽類和偽元素的組合
比如讓第一段的第一行加粗逻住，把 :first-child 和 ::first-line 選擇器放到一起。
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
4. 偽類參考
| 選擇器 | 描述 |
|---|---|
:active |
在用戶激活（例如點(diǎn)擊）元素的時(shí)候匹配迎献。 |
:any-link |
匹配一個(gè)鏈接的:link 和:visited 狀態(tài)瞎访。 |
:blank |
匹配空輸入值的 <input> 元素。 |
:checked |
匹配處于選中狀態(tài)的單選或者復(fù)選框吁恍。 |
:current |
匹配正在展示的元素扒秸，或者其上級(jí)元素。 |
:default |
匹配一組相似的元素中默認(rèn)的一個(gè)或者更多的 UI 元素冀瓦。 |
:dir |
基于其方向性（HTMLdir 屬性或者 CSSdirection 屬性的值）匹配一個(gè)元素伴奥。 |
:disabled |
匹配處于關(guān)閉狀態(tài)的用戶界面元素 |
:empty |
匹配除了可能存在的空格外，沒(méi)有子元素的元素翼闽。 |
:enabled |
匹配處于開(kāi)啟狀態(tài)的用戶界面元素拾徙。 |
:first |
匹配分頁(yè)媒體的第一頁(yè)。 |
:first-child |
匹配兄弟元素中的第一個(gè)元素感局。 |
:first-of-type |
匹配兄弟元素中第一個(gè)某種類型的元素尼啡。 |
:focus |
當(dāng)一個(gè)元素有焦點(diǎn)的時(shí)候匹配。 |
:focus-visible |
當(dāng)元素有焦點(diǎn)蓝厌，且焦點(diǎn)對(duì)用戶可見(jiàn)的時(shí)候匹配玄叠。 |
:focus-within |
匹配有焦點(diǎn)的元素，以及子代元素有焦點(diǎn)的元素拓提。 |
:future |
匹配當(dāng)前元素之后的元素读恃。 |
:hover |
當(dāng)用戶懸浮到一個(gè)元素之上的時(shí)候匹配。 |
:indeterminate |
匹配未定態(tài)值的 UI 元素代态，通常為復(fù)選框寺惫。 |
:in-range |
用一個(gè)區(qū)間匹配元素，當(dāng)值處于區(qū)間之內(nèi)時(shí)匹配蹦疑。 |
:invalid |
匹配諸如 <input> 的位于不可用狀態(tài)的元素西雀。 |
:lang |
基于語(yǔ)言（HTMLlang 屬性的值）匹配元素。 |
:last-child |
匹配兄弟元素中最末的那個(gè)元素歉摧。 |
:last-of-type |
匹配兄弟元素中最后一個(gè)某種類型的元素艇肴。 |
:left |
在分頁(yè)媒體中腔呜，匹配左手邊的頁(yè)。 |
:link |
匹配未曾訪問(wèn)的鏈接再悼。 |
:local-link |
匹配指向和當(dāng)前文檔同一網(wǎng)站頁(yè)面的鏈接核畴。 |
:is() |
匹配傳入的選擇器列表中的任何選擇器。 |
:not |
匹配作為值傳入自身的選擇器未匹配的物件冲九。 |
:nth-child |
匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子進(jìn)行匹配（比如 2n+1 匹配元素 1谤草、3、5莺奸、7 等丑孩。即所有的奇數(shù)個(gè)）。 |
:nth-of-type |
匹配某種類型的一列兄弟元素（比如灭贷，<p>元素）——兄弟元素按照 an+b 形式的式子進(jìn)行匹配（比如 2n+1 匹配元素 1温学、3、5氧腰、7 等枫浙。即所有的奇數(shù)個(gè)）。 |
:nth-last-child |
匹配一列兄弟元素古拴，從后往前倒數(shù)箩帚。兄弟元素按照 an+b 形式的式子進(jìn)行匹配（比如 2n+1 匹配按照順序來(lái)的最后一個(gè)元素，然后往前兩個(gè)黄痪，再往前兩個(gè)紧帕，諸如此類。從后往前數(shù)的所有奇數(shù)個(gè)）桅打。 |
:nth-last-of-type |
匹配某種類型的一列兄弟元素（比如是嗜，<p>元素），從后往前倒數(shù)挺尾。兄弟元素按照 an+b 形式的式子進(jìn)行匹配（比如 2n+1 匹配按照順序來(lái)的最后一個(gè)元素鹅搪，然后往前兩個(gè)，再往前兩個(gè)遭铺，諸如此類丽柿。從后往前數(shù)的所有奇數(shù)個(gè)）。 |
:only-child |
匹配沒(méi)有兄弟元素的元素魂挂。 |
:only-of-type |
匹配兄弟元素中某類型僅有的元素甫题。 |
:optional |
匹配不是必填的 form 元素。 |
:out-of-range |
按區(qū)間匹配元素涂召，當(dāng)值不在區(qū)間內(nèi)的的時(shí)候匹配坠非。 |
:past |
匹配當(dāng)前元素之前的元素。 |
:placeholder-shown |
匹配顯示占位文字的 input 元素果正。 |
:playing |
匹配代表音頻炎码、視頻或者相似的能“播放”或者“暫兔顺伲”的資源的，且正在“播放”的元素辅肾。 |
:paused |
匹配代表音頻队萤、視頻或者相似的能“播放”或者“暫停”的資源的矫钓，且正在“暫停”的元素舍杜。 |
:read-only |
匹配用戶不可更改的元素新娜。 |
:read-write |
匹配用戶可更改的元素。 |
:required |
匹配必填的 form 元素既绩。 |
:right |
在分頁(yè)媒體中概龄，匹配右手邊的頁(yè)。 |
:root |
匹配文檔的根元素饲握。 |
:scope |
匹配任何為參考點(diǎn)元素的的元素私杜。 |
:valid |
匹配諸如 <input> 元素的處于可用狀態(tài)的元素。 |
:target |
匹配當(dāng)前 URL 目標(biāo)的元素（例如如果它有一個(gè)匹配當(dāng)前 URL 分段的元素）救欧。 |
:visited |
匹配已訪問(wèn)鏈接衰粹。 |
4. 偽元素參考
| 選擇器 | 描述 |
|---|---|
::after |
匹配出現(xiàn)在原有元素的實(shí)際內(nèi)容之后的一個(gè)可樣式化元素。 |
::before |
匹配出現(xiàn)在原有元素的實(shí)際內(nèi)容之前的一個(gè)可樣式化元素笆怠。 |
::first-letter |
匹配元素的第一個(gè)字母铝耻。 |
::first-line |
匹配包含此偽元素的元素的第一行。 |
::grammar-error |
匹配文檔中包含了瀏覽器標(biāo)記的語(yǔ)法錯(cuò)誤的那部分蹬刷。 |
::selection |
匹配文檔中被選擇的那部分瓢捉。 |
::spelling-error |
匹配文檔中包含了瀏覽器標(biāo)記的拼寫錯(cuò)誤的那部分。 |
