一、:root伪类

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

1、语法

:root {
	/* ... */
}

2、样例

设置文档背景色：

:root{
	background: #C7EDCC;
}

二、var函数

可以使用var()函数获取一个自定义属性的值来代替非自定义属性中值的任何部分，它不能用作除属性值之外的其他值，例如：属性名、选择器等。

1、语法

var( <custom-property-name> , <declaration-value>? )
  • custom-property-name

自定义属性的名称

  • declaration-value

此参数可选，用作备用值；如果第一个参数引用的自定义属性无效，则该函数将使用此值。

2、样例

基本用法：

:root {
	--main-bg-color: pink;
}

body {
	background-color: var(--main-bg-color);
}

使用备用值：

:root {
	--backup-bg-color: #C7EDCC;
}

.component .header {
	/* 如果自定义属性 header-color 没有被设置，则使用备用值blue */
	color: var(--header-color, blue);
}

body {
	/* 如果自定义属性 main-bg-color 没有被设置，则使用自定义属性 backup-bg-color 作为备用值；如果自定义属性 backup-bg-color 也没有被设置，则使用备用值 white。 */
	color: var(--main-bg-color, var(--backup-bg-color, white));
}

三、自定义属性

1、简介

CSS中以--为前缀的属性（例如--example-name）表示自定义属性；CSS自定义属性有时候也被称为CSS变量，可以将CSS中重复的值设置为自定义属性来实现复用。 例如：设置一个自定义属性--main-color: #00ff00;，通过var函数来使用color: var(--main-color);，当这个值发生变化时就可以很容易的修改。 使用自定义属性的另一个好处是让标识语义化，例如：--main-text-color会比#00ff00更容易理解。自定义属性受级联的约束，并从其父级继承其值。

2、样例

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS变量</title>
		<style>
			:root{
				--theme-color: pink;
			}
			div,h3{
				border: 10px solid var(--theme-color);
				padding: 10px;
				margin: 20px;
			}
			h3{
				color: var(--theme-color);
			}
			#mybutton{
				cursor: pointer;
				color: #FFF;
				padding: 5px;
			    border: none;
				background-color: var(--theme-color);
			}
		</style>
	</head>
	<body>
		<div>Hello World!</div>
		<h3>Hello Css~</h3>
		<div>
			<button id="mybutton">Change border color</button>
		</div>
	</body>
	<script>
		let index = 0;
		document.querySelector("#mybutton").onclick = function(){
			let colors = ['pink', 'lightgreen', 'lightblue'];
			let root = document.querySelector(':root');
			//获取属性值
			console.log(root.style.getPropertyValue('--theme-color'));
			//设置属性值
			root.style.setProperty('--theme-color', colors[++index % 3]);
		};
	</script>
</html>

效果：

参考资料