:root 伪类是匹配文档的根元素，很多时候，根元素也就是 html 元素，用 root 伪类来匹配根元素，目的就是解决根元素不是 html 的场景，比如根元素是 svg 的时候。
root 伪类的使用场景，我们引入某些 UI 库，很多时候，需要重置一些样式，就可以使用 root 伪类，这样就不担心重置的样式不生效了。因为伪类 root 的优先级更高。比如：
```css
:root {
overflow-y: auto;
scrollbar-gutter: stable;
}
```
另一种情况就是在 root 伪类内定义变量，比如：
```css
:root {
/* 颜色变量 */
--blue: #248600;
--red: #f461cc;
/* 尺寸变量 */
--layerWidth: 1100px;
}
```
因为在伪类 root 中定义变量，代码的可读性更好，所以有很多团队都推荐伪类 root 负责定义变量，html 负责样式。至于哪种方式好点，就得看看团队的编码规范了。
:empty 伪类用来匹配空标签。
但是这里的空标签，标签内不能有注释、换行，否则不生效。
first-child 伪类，匹配的是第一个元素，last-child 匹配最后一个元素。
:only-child伪类，顾名思义，就是匹配没有兄弟元素的元素。
匹配指定序号的元素。它们有两种参数类型：
第一种是：关键字的形式
1. odd：匹配第奇数个元素，如第1个元素、第3个元素、第5个元素
2. even：匹配第偶数个元素；
第二种是：函数符号的形式
1. An+B：其中A和B都是固定的数值
:first-of-type表示当前第一个标签类型的元素，:last-of-type伪类的语法和匹配规则与:first-of-type的类似
