在CSS中，:root 是一个伪类选择器，它用来匹配文档的根元素。在HTML文档中，:root 实际上总是指向 <html> 元素。:root 的主要用途是定义一个全局的CSS变量（也称为CSS自定义属性），这些变量可以在整个文档的任何地方被引用。
使用CSS变量可以让你的样式表更加灵活和易于维护，特别是当你在多个地方需要重复使用同一个值时。通过:root定义的变量，你可以在整个项目中轻松地更新这个值，而不需要去查找和替换所有实例。
基本语法
在:root选择器内部，你可以定义自定义属性，语法如下：
:root {
--main-bg-color: coral;
--text-color: #333;
}
这里，--main-bg-color 和 --text-color 是自定义属性的名称，coral 和 #333 是它们对应的值。
使用CSS变量
定义了自定义属性之后，你可以在CSS的任何地方通过 var() 函数来引用它们，如下所示：
body {
background-color: var(--main-bg-color);
color: var(--text-color);
}
h1 {
color: var(--text-color);
}
在这个例子中，body 和 h1 元素的 background-color 和 color 属性分别使用了 :root 中定义的 --main-bg-color 和 --text-color 变量。
示例代码
下面是一个完整的HTML和CSS示例，展示了如何使用:root和CSS变量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :root 示例</title>
<style>
:root {
--primary-color: #007BFF;
--secondary-color: #6C757D;
}
body {
font-family: Arial, sans-serif;
background-color: var(--secondary-color);
color: white;
padding: 20px;
}
h1 {
color: var(--primary-color);
}
.button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>CSS :root 示例</h1>
<p>这是一个简单的示例，展示了如何使用CSS的:root伪类来定义全局变量。</p>
<button class="button">点击我</button>
</body>
</html>
在这个示例中，我们定义了两个全局变量 --primary-color 和 --secondary-color，并在 body、h1 和一个类为 .button 的元素中使用了这些变量。这样，我们就可以轻松地修改这些变量的值，而不需要去修改所有使用这些颜色的地方。
