css - 根据检查的输入更改 CSS

Question

提前致歉，因为我知道这是一个愚蠢的问题。我正在使用以下 CSS 代码更改标签的背景颜色，当它的关联复选框被选中时:

#project input[id="button1"]:checked + label {background-color:red;}

当选中 id="button1" 时，我还想更改整个页面的背景颜色。那可能吗？我尝试添加到该行和一个新行但没有成功:

input[id="button1"]:checked {background-color:blue;}

这不应该影响 DIV 之外的背景吗？我想不通。成品应具有与复选框状态相关的标签背景色和页面背景色。

Answer 1

input[id="button1"]:checked {background-color:blue;}

“那不应该影响 DIV 之外的背景吗？” - 不，它只会影响那个输入元素。

一般来说，你不能只通过 CSS 来做到这一点，因为你需要假设的 :contains 选择器:

body:contains(input[id="button1"]:checked) {background-color:blue;}

不幸的是，:contains 具有非常高的计算复杂性，通常要在 CSS 中实现。