语法
<style>
:root {
/* ... */
}
</style>
这个 CSS 伪类 :root 匹配文档树的根元素，表示选中
<html>元素，除了优先级更高之外，与 html 选择器相同
<style>
/* 选中文档的根元素（HTML 中的 <html>） */
:root {
background: yellow;
}
</style>
效果:
声明全局 CSS 变量
用
--开头自定义样式变量名，只要当前页面引用了:root所在的文件，都可以使用var()来引用
<style>
:root{
--main-color: #daa9ff;
--width: 200px;
--height: 100px;
}
div{
/* var() 函数可以代替元素中任何属性中的值的任何部分，var() 函数不能作为属性名、选择器或者其他除了属性值之外的值 */
background-color: var(--main-color);
width: var(--width);
height: var(--height);
}
</style>
<div></div>
效果:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root
