纯CSS利用checkbox实现状态切换

背景

在页面中经常会用到例如侧边栏收起和展开，导航栏点击展示等功能，这些都需要一个变量来存储当前状态，最简单的办法当时是通过js，但是很多时候我们不愿意用js来实现，html和js混装以后阅读性下降，用css和checkbox来进行状态管理相对来说就方便很多。

使用

原理很简单，就是利用check类型input记录状态，用CSS的兄弟选择器来进行不同状态的展示。

代码

HTML

<input id="checkbox1" type="checkbox" />
<div class="sssdiv" id='sssdiv'>
    <span>sss</span>
</div>

.sssdiv{color: #2ecc71;font-size: 48px;}
#checkbox1:checked~ #sssdiv{
color: #3498db;font-size: 68px;
}

这样就能实现颜色和字体随着点击进行切换，当然展示和隐藏等也可以通过此方法实现