: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的类似
本文链接：http://www.28at.com/showinfo-26-35276-0.htmlCSS：这几个伪类，你用了吗
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号