是的，我使用过CSS3的:root伪类。:root是一个特殊的CSS伪类，它匹配文档树的根元素，通常是<html>元素。在HTML文档中，:root选择器用于定义全局或可继承的CSS变量（也称为自定义属性），这些变量可以在整个文档中使用。
通过:root选择器定义的CSS变量具有几个优点：
- 全局可访问性：在
:root中定义的变量可以在整个文档中的任何CSS规则中访问和使用，这使得它们非常适合存储全局样式值，如主题颜色、字体大小等。 - 易于维护：当需要在多个地方使用相同的值时，使用CSS变量可以简化代码的维护。如果将来需要更改这个值，只需在
:root中选择器中更新它，而无需搜索和替换整个代码库中的每个实例。 - 动态性：虽然CSS本身是静态的，但CSS变量可以与JavaScript结合使用，以实现动态的样式更改。通过JavaScript修改
:root中的变量值，可以实时更新页面的样式。
下面是一个简单的示例，展示了如何使用:root定义和使用CSS变量：
:root {
--main-color: #007bff;
--secondary-color: #6c757d;
--font-size: 16px;
}
body {
background-color: var(--main-color);
color: white;
font-size: var(--font-size);
}
button {
background-color: var(--secondary-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
在这个示例中，我们在:root选择器中定义了三个CSS变量：--main-color、--secondary-color和--font-size。然后，我们在body和button选择器中使用这些变量来设置背景颜色、字体大小等样式属性。通过使用var()函数，我们可以轻松地引用这些变量的值。