了解css：root伪类选择器，以及如何在项目中使用它！
CSS ：root伪类选择器用于选择给定规范的最高级别父类。在HTML规范中，：root实质上等同于html选择器。
在下面的CSS片段中，：root和html样式将做同样的事情：
1:root {
2 background-color: gray;
3}
4
5html {
6 background-color: gray;
7}
如果您注意到我说的：root实质上等同于html选择器。事实上，：root选择符比html更有权威性。这是因为它实际上被认为是伪类选择器(如：first-Child或：hover)。
作为伪类选择器，它有更多的权限/比标签选择器更高的specificity：
1:root {
2 background-color: blue;
3 color: white;
4}
5
6html {
7 background-color: red;
8 color: white;
9}
尽管后面紧随其后的是html选择符，但：root选择符仍然胜出，这要归功于它更高的专用性！
跨规范
在HTML规范中，：root伪类针对的是最高级别的父类：html。
因为css也是为svg和XML设计的，所以你可以实际使用：root，它只会对应一个不同的元素。
例如，在SVG中，最高级别的父级是svg标签。
1:root {
2 fill: gold;
3}
4
5svg {
6 fill: gold;
7}
与Html类似，：root和svg标签选择相同的元素，但：root选择符具有更高的专用性。
实际使用方法
：root有什么实际用途？正如我们前面介绍的，它是`html‘选择器的安全替代品。
这意味着您可以使用html选择器执行您通常要执行的任何操作：
1:root {
2 margin: 0;
3 padding: 0;
4 color: #0000FF;
5 font-family: "Helvetica", "Arial", sans-serif;
6 line-height: 1.5;
7}
如果您愿意，您可以重构此代码以使用Css Custom Properties]在全局级别创建变量！
1:root {
2 margin: 0;
3 padding: 0;
4 --primary-color: #0000FF;
5 --body-fonts: "Helvetica", "Arial", sans-serif;
6 --line-height: 1.5;
7}
8
9p {
10 color: var(--primary-color);
11 font-family: var(--body-fonts);
12 line-height: var(--line-height);
13}
使用：root而不是html的额外好处是，您可以为SVG图形设置样式！🤯
1:root {
2 margin: 0;
3 padding: 0;
4 --primary-color: #0000FF;
5 --body-fonts: "Helvetica", "Arial", sans-serif;
6 --line-height: 1.5;
7}
8
9svg {
10 font-family: var(--body-fonts);
11}
12
13svg circle {
14 fill: var(--primary-color);
15}
<$>[注]有关：root伪类选择器的详细文档，请访问Mozilla Developer Network<$>