温馨提示
该文章距离上次更新已经过去了 1275 天，文章内容可能已经过时。
提示
现在很多网站css都使用:root和var()的写法，这里记录一下:root和var()的使用方法
:root
:root是一个伪类，用于匹配文档的根元素（html），相当于一个全局属性，只要引入了:root所在的文件，就能使用var()获取到:root中定义的css样式
例如：
:root {
--home-bg: #888888;
}
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
var()
var()是用于获取在:root中自定义的css样式
例如：
:root {
--home-bg: #888888;
background: var(--home-bg); // 相当于 background: #888888;
}
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4