使用 :root 设置 CSS 的全局变量

最新推荐文章于 2025-07-23 11:12:18 发布

~world~

最新推荐文章于 2025-07-23 11:12:18 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_43714836/article/details/137656246

本文介绍了CSS3的:root伪类选择器，它匹配文档根元素（HTML中为html元素），定义的样式是全局样式。其亮点是可定义全局变量，任何CSS地方都能使用。通过双英文中杆线开头设置变量，用var()引用，变量还能引用其他变量。

认识 :root

:root 伪类选择器，是 CSS3 属性，表示匹配文档的根元素，在 HTML 文档中的根元素始终是 html 元素。

:root 伪类选择器，跟别的选择器一样能设置样式，因为其匹配的是文档的根元素，所以其定义的样式同样是全局样式。但其最闪亮的功能恐怕是定义全局变量的功能，相当 javaScript 定义全局变量，意味着任何一个 css 地方都能使用到其定义的变量。（推荐在 :root 中只设置全局变量，不设置全局样式，便于层次维护）

:root 选择器定义变量，通过双英文中杆线 – 开头设置，例如： --color-black-light: #666666 。

:root 选择器使用变量，通过 var() 来引用变量，例如：color: var(–color-black-light) 。同样，变量能够引用另一个变量，例如：–border-black-light:var(–color-black-light) 。

示例

base.css

// 颜色类变量
:root {
  --color-black-weight: #222;
  --color-black-normal: #333;
  --color-black-light: #666;
}
// 文本类变量
:root {
  --text-color-normal: var(--color-black-normal);
  --text-font-size-large: 18px;
  --text-font-size-small: 12px;
}

main.css

body {
  color: var(--color-black-light);
  font-size: var(--text-font-size-small);
}
.title {
  color: var(--color-black-weight);
  font-size: var(--text-font-size-large);
}