:root伪类用于定义全局CSS变量，通过--变量名在:root中声明，并用var()函数调用，实现样式值的集中管理与复用。
在CSS中，:root伪类可以用来定义全局变量，这些变量可以在整个样式表中使用。通过这种方式，你可以集中管理常用值，比如颜色、字体大小或间距，提升代码的可维护性和一致性。
什么是:root伪类？
:root是一个伪类选择器，它匹配文档的根元素（在HTML中通常是html元素）。它的特殊之处在于具有最高的优先级，且能访问到所有后代元素，非常适合用来声明全局自定义属性（即CSS变量）。
如何定义和使用CSS变量？
在:root中定义变量时，需要使用两个连字符开头（--），然后通过var()函数调用它们。
- 定义变量：--main-color: #3498db;
- 使用变量：color: var(--main-color);
示例：
立即学习“前端免费学习笔记（深入）”；
<font style="color:#2c3e50;">:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-base: 16px;
--border-radius: 4px;
}
button {
background-color: var(--primary-color);
font-size: var(--font-size-base);
border-radius: var(--border-radius);
}
</font>
为什么推荐使用:root定义变量？
将变量放在:root中，可以让这些变量在整个页面范围内可用。相比在其他选择器中定义，这种方式更清晰、统一，便于主题切换和响应式设计。
- 全局可访问：任何元素都可以使用这些变量
- 易于维护：修改一个值即可影响多处样式
- 支持JavaScript操作：可通过JS动态读取或更改变量值
基本上就这些。合理利用:root定义变量，能让CSS更整洁、灵活。不复杂但容易忽略细节，比如变量名区分大小写、必须用var()读取等。掌握好这一点，对构建可扩展的样式系统很有帮助。
