css代码：
通过label标签选中指定的input标签，选中input标签时兄弟元素换色。
* { margin: 0; padding: 0; } /* 将复选框隐藏 */ #but { display: none; } /* 添加点击效果 */ #but:checked~#body { color: red; background-color: aqua; } #body { background-color: blue; width: 100px; height: 100px; }
html代码：
<input type="checkbox" id="but"> <div id="body"> </div> <label for="but">点我换色</label>
思路：利用html5新增标签label，点击label标签时让浏览器的焦点聚到相应的多选框，当多选框选中时使用“~”兄弟选择器让他的兄弟元素改变颜色。
注：1.使用兄弟选择器它们两个必须在同一个父元素里面。
2.需使用多选框，使用单选框只能点击其改变颜色，点击第二次改变不了初始颜色。
