这里定义变量必须是以'--'开头,然后其他页面的样式表就可以直接引用这个变量了
至此就完成了动态修改:root变量实现换肤了,具体的应用场景中我们应该是在页面上操作,选中需要的肤色然后修改:root定义的变量值,考虑到浏览器刷新会重置原始状态的值,这里要结合本地存储方式记住选中的肤色,具体的实现参考:
root译为根源,是css选择器,选中的是根元素,也就是HTML标签;如果里面直接写属性和属性值,你能在页面中看到的效果就可以把:root{color:red;}认为是body{color:red;},还有一种写法:root{--aa:red;},这个时候你可以认为是声明变量,也就是--aa等于red;此时你可以把var(--aa)当成red用,如:div {color:var(--aa);}等价于div{color:red;}:root伪类代表根元素,在设置样式的时候,等同于html选择器。但是它有比html更多的权限,比如在内部自定义属性创建全局级别的变量,如下:
:root{
margin:0
padding:0
--primary-color:#666666
}
h1{
color:var(--primary-color)
}