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

在行動中

看看這個小提琴是為了實現這些全域性布林值。