CSS 带有复选框的全局布尔值：checked和〜（通用同级组合器）
示例
使用〜选择器，您可以轻松实现全局可访问的布尔值，而无需使用JavaScript。
将布尔值添加为复选框
在文档的开头，根据需要添加具有唯一性id和hidden属性集的布尔值：
<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />
<!-- here begins actual content, for example: -->
<div id="container">
<div id="sidebar">
<!-- Menu, Search, ... -->
</div>
<!-- Some more content ... -->
</div>
<div id="footer">
<!-- ... -->
</div>更改布尔值
您可以通过添加label带有for属性集的来切换布尔值：
<label for="sidebarShown">Show/Hide the sidebar!</label>
使用CSS访问布尔值
普通选择器（如.color-red）指定默认属性。可以通过以下true/false选择器覆盖它们：
/* true: */ <checkbox>:checked ~ [sibling of checkbox & parent of target] <target> /* false: */ <checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>
请注意<checkbox>，[sibling...]并且<target>应该由适当的选择器代替。[sibling...]可以是一个特定的选择器（通常是懒惰的），*或者如果目标已经是该复选框的同级则为空。
上述HTML结构的示例为：
#sidebarShown:checked ~ #container #sidebar {
margin-left: 300px;
}
#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
background: #333;
}在行动
有关这些全局布尔值的实现，请参见此提琴。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短