CSS 变量换色方案

自己也是之前碰到换色时查询了很久没有一个好的方案 后来朋友提醒才发现 特此记录 :root :root是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。

var() var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

<script>
    //在js中可以直接去修改:root中定义好变量的值
    document.documentElement.style.setProperty('--color','red');
</script>
<style>
    /*定义好需要使用的变量*/
    :root{
      --color:#000000;
      --width:100px;
    }
    
    /*在设置样式时都可使用变量*/
    .div{
      /*使用变量时通过var来使用*/
      background:var(--color)
    }
    

</style>