Html A'；灯开关'；使用CSS切换整个页面的文本和背景颜色

我正在尝试创建一个带有CSS的“灯光开关”来切换页面的颜色。我用Joe对这个问题的出色回答做了一个糟糕的开始：

是否可以针对整个页面而不是div中的内容？另外：我可以做更多的事情来伪装按钮作为一个链接吗

HTML:

---

感谢您的关注-并表示歉意，我真的很天真。

嘿，您必须像这样更改css：

 input[type="checkbox"]:checked + label +div,
input[type="checkbox"]:checked + label +div>a
,input[type="checkbox"]:checked+label {
    background: #000;
    color: #fff;
}

<input type="checkbox" id="check" />
<label for="check" class="lights">Click here to invert colours</label>
<div>This works...<br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

html是这样的：

 input[type="checkbox"]:checked + label +div,
input[type="checkbox"]:checked + label +div>a
,input[type="checkbox"]:checked+label {
    background: #000;
    color: #fff;
}

<input type="checkbox" id="check" />
<label for="check" class="lights">Click here to invert colours</label>
<div>This works...<br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

单击此处反转颜色
这是有效的…

整页（不包含div中的所有内容）怎么样

您可以将

设置为

位置：绝对

逐页，并设置z-

索引：-1因此它将在您的正常内容下


body，一个{
颜色：#666；
}
div{
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
-o型过渡：所有0.5s线性；
过渡：所有0.5s线性；
}
输入[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]：选中+div{
背景：#000；
颜色：#fff；
}
/*在下面添加了代码*/
身体{
保证金：0；
}
div{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：-1；
左：0；
排名：0；
}
单击此处反转颜色
据我所知，伪类只能是儿童。。。你会接受浏览器自带的javascript吗？…谢谢Careen-我想这可能是一个答案！你知道我会怎么做吗？qtgye在这里的答案是javascript版本：我最终使用了。@确定下面的任何纯css解决方案都适合你吗？令人惊讶的是，你选择了一个js解决方案，你甚至没有在它上面标记你的问题。感谢sdcr-我尝试将它们结合起来（你的背景加上另一个切换文本的答案），结果在Chrome和Firefox中有效，但在Safari中无效。将开关置于外部而不是与文本内联也有点不方便。我很抱歉-你的解决方案让我差点。。。我不认为我有能力把它完成。就我所知：