在css中:root伪类定义全局变量-css教程-PHP中文网

在css中:root伪类定义全局变量

P粉602998670

发布： 2025-10-30 21:00:02

原创

754人浏览过

:root伪类用于定义全局CSS变量，通过--变量名在:root中声明，并用var()函数调用，实现样式值的集中管理与复用。

在css中:root伪类定义全局变量

在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>

登录后复制