CSS：这几个伪类，你用了吗

## :root 伪类

: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 伪类

:empty 伪类用来匹配空标签。

但是这里的空标签，标签内不能有注释、换行，否则不生效。

##  :first-child伪类和:last-child伪类

first-child 伪类，匹配的是第一个元素，last-child 匹配最后一个元素。

## :only-child伪类

:only-child伪类，顾名思义，就是匹配没有兄弟元素的元素。

##  :nth-child()伪类和:nth-last-child()伪类

匹配指定序号的元素。它们有两种参数类型：

第一种是：关键字的形式

1. odd：匹配第奇数个元素，如第1个元素、第3个元素、第5个元素

2. even：匹配第偶数个元素；

第二种是：函数符号的形式

1. An+B：其中A和B都是固定的数值

## :first-of-type伪类和:last-of-type伪类

:first-of-type表示当前第一个标签类型的元素，:last-of-type伪类的语法和匹配规则与:first-of-type的类似