## :root 偽類(lèi)

:root 偽類(lèi)是匹配文檔的根元素，很多時(shí)候，根元素也就是 html 元素，用 root 偽類(lèi)來(lái)匹配根元素，目的就是解決根元素不是 html 的場(chǎng)景，比如根元素是 svg 的時(shí)候。

root 偽類(lèi)的使用場(chǎng)景，我們引入某些 UI 庫(kù)，很多時(shí)候，需要重置一些樣式，就可以使用 root 偽類(lèi)，這樣就不擔(dān)心重置的樣式不生效了。因?yàn)閭晤?lèi) root 的優(yōu)先級(jí)更高。比如：

```css
:root {
    overflow-y: auto;
    scrollbar-gutter: stable;
}
```

另一種情況就是在 root 偽類(lèi)內(nèi)定義變量，比如：

```css
:root {
   /* 顏色變量 */
   --blue: #248600;
   --red: #f461cc;
   /* 尺寸變量 */
   --layerWidth: 1100px;
}
```

因?yàn)樵趥晤?lèi) root 中定義變量，代碼的可讀性更好，所以有很多團(tuán)隊(duì)都推薦偽類(lèi) root 負(fù)責(zé)定義變量，html 負(fù)責(zé)樣式。至于哪種方式好點(diǎn)，就得看看團(tuán)隊(duì)的編碼規(guī)范了。

## :empty 偽類(lèi)

:empty 偽類(lèi)用來(lái)匹配空標(biāo)簽。

但是這里的空標(biāo)簽，標(biāo)簽內(nèi)不能有注釋、換行，否則不生效。

##  :first-child偽類(lèi)和:last-child偽類(lèi)

first-child 偽類(lèi)，匹配的是第一個(gè)元素，last-child 匹配最后一個(gè)元素。

## :only-child偽類(lèi)

:only-child偽類(lèi)，顧名思義，就是匹配沒(méi)有兄弟元素的元素。

##  :nth-child()偽類(lèi)和:nth-last-child()偽類(lèi)

匹配指定序號(hào)的元素。它們有兩種參數(shù)類(lèi)型：

第一種是：關(guān)鍵字的形式

1. odd：匹配第奇數(shù)個(gè)元素，如第1個(gè)元素、第3個(gè)元素、第5個(gè)元素

2. even：匹配第偶數(shù)個(gè)元素；

第二種是：函數(shù)符號(hào)的形式

1. An+B：其中A和B都是固定的數(shù)值

## :first-of-type偽類(lèi)和:last-of-type偽類(lèi)

:first-of-type表示當(dāng)前第一個(gè)標(biāo)簽類(lèi)型的元素，:last-of-type偽類(lèi)的語(yǔ)法和匹配規(guī)則與:first-of-type的類(lèi)似