# 自定义属性
# 根元素
:root 相当于 html 根元素,优先级更改
:root {
color: red
}
html {
color: green;
}
1
2
3
4
5
6
2
3
4
5
6
文本显示红色
TIP
:root 可以应用于HTML文档,也可以应用于所有类似XML文档,这个是:root存在的原因
# 自定义属性
--属性名:值
- 变量名称必须以 -- 开头
- 变量只能存储一个属性的值
- 区分大小写
var()函数可以代替元素中任何属性中的值的任何部分
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
1
2
3
4
5
6
7
2
3
4
5
6
7