css点击换色

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.需使用多选框，使用单选框只能点击其改变颜色，点击第二次改变不了初始颜色。