楼主最近有点时间，自从大浪淘沙从ui设计转到前端来一直没有过于系统的学习一下这方面的知识，遂即就看了一下jym是如何一步步来的，其中就有人提到了一个网站 百度前端训练营 ，想着能够系统化的学习一下前端方面的知识，对于js这块是真不太熟。
这怎么行呢，所以就开始了刷这个了，碰到了一个纯css实现主题切换的效果，我寻思着无非就是通过css变量来实现效果，问题就是如何要改变css的变量，在不使用js的前提下。
如图，就是实现上面的效果。
这里涉及到的知识点：
1、css变量（这个是核心！）
:root {
--color:#f00;
}
/*
可以使用数字[0-9]、字母[a-zA-Z]、下划线[_]和短横线[-]组合
可以使用中文等文字字符
不能使用 `$、[、^、(、%` 等字符
大小写敏感
*/
div {
color:var(--color); /*然后这样使用*/
}
/*
var(custom-property-name, value)
* custom-property-name 必需，自定义属性的名称。
* value 可选，默认回退值。
/
2、如何选中了之后改变变量的值才是重点。我想到了2个办法，如果有更好的办法可以一起讨论呐~
1）通过 a 标签的伪类以及div的选中焦点样式，可以给div等元素增加 tabindex 来赋值。
2）通过input 来实现这个办法的话，可以修改很多样式，问题也少一些（推荐）
3、就是如何选中同级的兄弟级，也就是选择器之间的关系了css选择器介绍
这里主要用到的是 + 兄弟选择器。好了直接开撸代码。
效果如下
/*html*/
<div>
<input type="radio" value='green' name="color">
<input type="radio" value='black' name="color">
<div class="color">这是需要改变的地方</div>
</div>
/*css*/
div {
--color:#f00; /*这是根元素 也就是div*/
}
input[value='black']:checked + div {
--color:#000; /*这是选中值为黑的 改变变量*/
}
input[value='green']:checked + input + div {
--color:#8bc34a; /*这个地方的有个坑 就是兄弟间是相邻的才可以，像中间隔了个input 还得单独加一个input*/
}
.color {
color:var(--color)
}
总结就是细节很重要哇，在选择器这块比较绕了，当然也可以直接通过 class 类直接命名也可以，偷个懒= =！这就是今天的总结了，求大佬轻喷~ 纯属俺自己记录着玩儿。
另外吐槽一下，我百度了半天以及论坛，基本就是打着纯css或者css的名头 最后还是用了js里面的setProperty() 和getPropertyValue() 修改了属性值，当然这个也是最简单的办法，对于标题党深通恶绝啊啊啊啊~
