CSS"复选框黑客"设置body背景颜色

Question

这个问题纯属假设；我不打算使用这里讨论的方法。目的是了解更多关于CSS选择器的信息

考虑一个包含复选框的HTML页面。如果选中复选框，则主体元素的背景为红色。否则为蓝色。

这有可能在CSS中使用当前可用的选择器吗？

以下是限制条件：

• 任何地方都没有javascript
• 没有div覆盖整个页面。它必须是body元素的背景属性
• 没有像:has这样的未来CSS选择器。理想情况下，该方法应该在Codepen中进行演示

Answer 1

这里有一种方法。它满足你的所有条件，但它确实使用了一个伪元素，所以它在"它必须是主体元素的背景属性">要求，因为主体的背景颜色已设置，但红色来自伪元素：

input:checked::before {
content: '';
position: absolute;
background: red;
z-index: -1;
top:0;
right:0;
bottom:0;
left:0;
}
body {
margin: 0;
background: blue;
}

<input type="checkbox">