前言：
百度查啥的时候瞥到的一个糟糕回答的慕课提问，就“我行我上了”
https://www.imooc.com/qadetail/68527?t=547070#id_547070
正文:
首先，这几个选择器是干嘛的，
:root也就是选择了html的伪类选择器(:root选择器用匹配文档的根元素,在HTML中根元素始终是HTML元素。
题外话, :root是伪类选择器而不是伪元素选择器，参考链接https://blog.****.net/xiahuale/article/details/83507011)
与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
此外，"继承的权重是最低的"，
举例的话:
即时你.demo1在后面，导致demo2继承了color:#fff，依旧会是权重(0,0,0)的*会生效
继承之间的优先级是写在后面的生效，继承较于所有选择器权重最低。
继承权重低的参考链接https://segmentfault.com/q/1010000000614709
jsrun在线代码地址：https://jsrun.net/tcLKp/edit
ps:笔者目前倒是很少用到:root、html、*,
一般这些低权重的都是框架里搞好的，自己要用什么样式直接写权重比（0,1,0）大的就行，这次还真就补了一下知识盲区
================================================================================================
图灵社区上《css图鉴》电子版发售了https://www.ituring.com.cn/book/2764，
笔者正如看到《javascript数据结构与算法(第3版)》中原生js支持类型数组(ts有类型数组)一样，惊异于原生css也支持变量（CSS variable又叫做"CSS 自定义属性" CSS custom properties,阮一峰先生的介绍链接http://www.ruanyifeng.com/blog/2017/05/css-variables.html）
测试代码:
jsrun在线地址https://jsrun.net/mcLKp/edit