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