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;
}

在行动

有关这些全局布尔值的实现，请参见此提琴。