2. label+ckeckbox ~ for属性实现dom的显
2019-07-02 本文已影响0人
chan_it
例一：通过for跨元素控制元素的样式
只需要input的id属性匹配label的for属性即可。
图片.png
例二：通过for属性实现展开收起
思路：label相当于两个开关，input是一个灯泡。
<style>
.content{
display: none;
}
input#abc:checked ~ .content{
display: block;
}
.label2{
display: none;
}
input#abc:checked ~ .label1{
display: none;
}
input#abc:checked ~ .label2{
display: block;
}
</style>
<body>
<input type="checkbox" name="" id="abc" style="display: none;">
<label class="label1" for="abc">展开</label>
<label class="label2" for="abc">收起</label>
<div class="content">
label标签为 indivut 元素定义标注（标记）。
</div>
</body>
注意：
- 被控制的元素样式尽量不要写行内样式，可能会造成切换时候的样式权重不够。
- 关联的的元素尽量写在同一个层级里面。
- 哪一个是开关，哪一个是灯泡，要分清楚。
