首先，这几个选择器是干嘛的，

:root也就是选择了html的伪元素选择器，与html标签选择器区别是权重不同，

:root权重是(0,1,0),html权重（0,0,1）

:root的高位比html的高位的数值要大即:root权重比html高，

来的结果就是“即时你html选择器在:root下面写了背景色绿色，生效的还是:root"。

*选择器是这几个里面权重最低的(0,0,0)，但为什么能生效于html的子元素h1呢，

这里涉及到了“css样式继承”， transparent、background、position这几个属性是不会被样式继承的，所以父元素html的background不会生效于子元素。

"css继承"参考表:

https://segmentfault.com/q/1010000000269211/a-1020000000269251

https://www.cnblogs.com/gitbo/p/6597703.html

mdn链接https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance

此外，"继承的权重是最低的"，

举例的话:

*{background:yellow;color:black;}.demo1{color:#fff}

<div class="demo1">菜鸟教程<div class="demo2">我也变了</div></div>

即时你.demo1在后面，导致demo2继承了color:#fff，依旧会是权重(0,0,0)的*会生效

参考链接https://segmentfault.com/q/1010000000614709

继承之间的优先级是写在后面的生效，继承较于所有选择器权重最低。

测试结果

就是后面的代码会把前面的代码覆盖掉，谁写在后面就是谁了。

html选择的是整个页面，一个大容器。

：root选择器选择的就是｛html}

：root选择器的特殊性比html高，所以：root>html

通配符*号是选择所有容器里面的元素。

自己写了一下代码，前景色是red。

*>:root>html。

*很奇怪啊，通配符书上写的是没有特殊性的呀？

不是吧。那个写在最下面就取哪个啊