自定义属性

根元素

:root 相当于 html 根元素，优先级更改

:root {
  color: red
}
html {
  color: green;
}

文本显示红色

提示

:root 可以应用于HTML文档，也可以应用于所有类似XML文档，这个是:root存在的原因

自定义属性

--属性名：值

  • 变量名称必须以 -- 开头
  • 变量只能存储一个属性的值
  • 区分大小写

var()函数可以代替元素中任何属性中的值的任何部分

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}