首先，這幾個選擇器是干嘛的，

:root也就是選擇了html的偽元素選擇器，與html標(biāo)簽選擇器區(qū)別是權(quán)重不同，

:root權(quán)重是(0,1,0),html權(quán)重（0,0,1）

:root的高位比html的高位的數(shù)值要大即:root權(quán)重比html高，

來的結(jié)果就是“即時你html選擇器在:root下面寫了背景色綠色，生效的還是:root"。

*選擇器是這幾個里面權(quán)重最低的(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

此外，"繼承的權(quán)重是最低的"，

舉例的話:

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

<div?class="demo1">菜鳥教程<div?class="demo2">我也變了</div></div>

即時你.demo1在后面，導(dǎo)致demo2繼承了color:#fff，依舊會是權(quán)重(0,0,0)的*會生效

參考鏈接https://segmentfault.com/q/1010000000614709

繼承之間的優(yōu)先級是寫在后面的生效，繼承較于所有選擇器權(quán)重最低。

測試結(jié)果

就是后面的代碼會把前面的代碼覆蓋掉，誰寫在后面就是誰了。

html選擇的是整個頁面，一個大容器。

：root選擇器選擇的就是｛html}

：root選擇器的特殊性比html高，所以：root>html

通配符*號是選擇所有容器里面的元素。

自己寫了一下代碼，前景色是red。

*>:root>html。

*很奇怪啊，通配符書上寫的是沒有特殊性的呀？

不是吧。那個寫在最下面就取哪個啊