Question

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

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

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

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

这不应该影响DIV之外的背景吗？我无法弄清楚。成品应该具有标签背景颜色和页面背景颜色连接到复选框的状态。

Answer 1

通过纯CSS事件，您只能更改切换事件的元素的子元素的样式。你的身体永远不是checkbox input的孩子（除非你很高）。所以唯一的选择是一些JavaScript / jQuery。

Basic simple example

var button = document.getElementById('button1');

button.addEventListener('click', function() {
    document.querySelector('body').classList.toggle('blue');
});

Answer 2

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

＆＃34;不应该影响DIV之外的背景吗？＆＃34; - 不，它只影响那个输入元素。

一般情况下，你不能仅仅通过CSS表示，因为你需要假设：包含选择器：

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

不幸的是：包含一般非常高的计算复杂度。

根据检查的输入更改CSS

2 个答案: