CSS中:root伪类的说明和使用

定义和用法

:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素，所以也可以把:root理解为html根元素选择器，但是比html根元素的优先级高，:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式。CSS :root 选择器 | CSS 参考手册

定义全局变量

你可以使用:root来定义一个全局的字体大小：

css:root {
    --font-size: 16px; // 定义CSS变量；
    box-sizing:border-box;// 代码中所有盒模型的边框向内挤压
}

在其他的CSS规则中，你就可以引用这个字体大小变量：

cssbody {
    font-size: var(--font-size);
}

作为伪类选择器，它比标签选择器具有更高的优先级：

:root {
  background-color: blue;
  color: white;
}
 
html {
  background-color: red;
  color: white;
}

尽管 html 选择器出现在后面，:root 选择器仍然胜出，这要归功于它更高的优先级！

使用 CSS 自定义属性在全局级别创建变量：

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}
 
p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}