2018-08-23 CSS3的root选择器
2018-08-23 本文已影响0人
橙子不圆
:root 选择器概述
:root这个CSS伪类匹配文档树的根元素，对于HTML来说，:root表示<html>元素，除了优先级更高外，与html标签选择器相同。
:root选择器的作用一般用来生命CSS的全局变量
--前缀的形式是代表具有值得自定义的属性，可以通过var函数在全文档范围内复用。
:root {
--main-color: blank;
--pane-padding: 5px 20px;
}
在之后的css中就可以直接饮用变量
h1 {
color: var(--main-color);
}
实际上--的前缀形式不仅是在:root选择器上使用，可以在任何css中选择器中使用，并在其子元素内用var函数引用，而兄弟元素之间不能引用。
<style>
.wrapper {
--main-color: red;
}
.wrapper2 {
/* 兄弟元素之间引用没有作用 */
color: var(--main-color);
}
.firstSon {
color: var(--main-color);
}
</style>
<div class="wrapper1">
父元素1
<div class="firstSon">子元素1</div>
<div class="secondSon">子元素2</div>
</div>
<div class="wrapper2">
父元素2
</div>
