使用 checkboxchecked 和（通用兄弟组合子）的全局布尔值

使用〜选择器，你可以轻松实现全局可访问的布尔值而无需使用 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;
}

在行动中

看看这个小提琴是为了实现这些全局布尔值。