css中的.root,2018-08-23 CSS3的root选择器

:root 选择器概述

:root这个CSS伪类匹配文档树的根元素，对于HTML来说，:root表示元素，除了优先级更高外，与html标签选择器相同。

:root选择器的作用一般用来生命CSS的全局变量

--前缀的形式是代表具有值得自定义的属性，可以通过var函数在全文档范围内复用。

:root {

--main-color: blank;

--pane-padding: 5px 20px;

}

在之后的css中就可以直接饮用变量

h1 {

color: var(--main-color);

}

实际上--的前缀形式不仅是在:root选择器上使用，可以在任何css中选择器中使用，并在其子元素内用var函数引用，而兄弟元素之间不能引用。

.wrapper {

--main-color: red;

}

.wrapper2 {

/* 兄弟元素之间引用没有作用 */

color: var(--main-color);

}

.firstSon {

color: var(--main-color);

}

父元素1

子元素1

子元素2

父元素2