:root:
:root是css3伪类选择器,表示文档的根元素,支持非ie浏览器、ie9及ie9以上浏览器。
var()
var()函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
实例:设置字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>红色字体</title>
<style>
:root{
--color-red:red;
}
.div1,.div2{
color: var(--color-red);
}
</style>
</head>
<body>
<div class="div1">
1 这个字是体红色
</div>
<div class="div2">
2 这个字是体红色
</div>
</body>
</html>
效果图: