“*、:root、html三者权重问题“以及“css样式继承的权重“以及“CSS 自定义属性（原生css中对变量的支持）”

前言：

百度查啥的时候瞥到的一个糟糕回答的慕课提问，就“我行我上了”

https://www.imooc.com/qadetail/68527?t=547070#id_547070

正文:

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

:root也就是选择了html的伪类选择器(:root选择器用匹配文档的根元素,在HTML中根元素始终是HTML元素。

题外话, :root是伪类选择器而不是伪元素选择器，参考链接https://blog.csdn.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

 

【题外话】============================================================================

《深入解析css》图灵社区链接https://www.ituring.com.cn/book/2583

"为了在样式表里覆盖行内声明，需要为声明添加!important，这样能将它提升到一个更高优先级的来源。但如果行内样式也被标记为!important，就无法覆盖它了。最好是只在样式表内用!important。将以上修改撤销，我们来看看更好的方式。"

"伪类选择器（如:hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。

通用选择器（*）和组合器（>、+、~）对优先级没有影响。"

此书中的“继承”=========================================================================

但不是所有的属性都能被继承。默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些。它们主要是跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。

还有一些其他的属性也可以被继承，比如列表属性：list-style、list-style-type、list-style-position以及list-style-image。表格的边框属性border-collapse和border-spacing也能被继承。注意，这些属性控制的是表格的边框行为，而不是常用于指定非表格元素边框的属性。（恐怕没人希望将一个<div>的边框传递到每一个后代元素。）以上为不完全枚举，但是已经很详尽了。

我们可以在适当的场景使用继承。比如给body元素应用字体，让后代元素继承该字体(font-family)