html - 'light swtch' 使用 CSS 切换整页的文本和背景颜色

Question

我正在尝试使用 CSS 创建一个“电灯开关”来切换页面的颜色。使用 Joe 对这个问题的出色回答，我做了一个糟糕的开始:Change background on button click, using CSS only?

是否可以定位整个页面而不是 div 中的内容？另外:我还能做些什么来将按钮伪装成链接吗？

http://jsfiddle.net/gd4dma64/

HTML:

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<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>

CSS:

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

感谢您的观看 - 抱歉，我真的很天真。

Answer 1

嘿，你必须像这样更改你的 css:

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

HTML 是这样的:

<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>