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;
}在行动
有关这些全局布尔值的实现，请参见此提琴。