css点击换色

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