你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。

因为层叠的效果，CSS 变量通常会定义在:root元素里。

就像html是body的容器一样，你也可以认为:root元素是你整个 HTML 文档的容器。

在:root创建的变量，在整个网页里面都能生效。

当你在:root里创建变量时，这些变量的作用域是整个页面。

如果在元素里创建相同的变量，会重写:root变量设置的值。

层级CSS变量 不懂， :root创建的变量，在整个网页都生效。

在class创建相同的变量会覆盖:root的变量