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()伪类
匹配指定序号的元素。它们有两种参数类型:
第一种是:关键字的形式
odd:匹配第奇数个元素,如第1个元素、第3个元素、第5个元素
even:匹配第偶数个元素;
第二种是:函数符号的形式
An+B:其中A和B都是固定的数值
## :first-of-type伪类和:last-of-type伪类
:first-of-type表示当前第一个标签类型的元素,:last-of-type伪类的语法和匹配规则与:first-of-type的类似