语法
<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
