我试图使用复选框来改变元素的颜色，但它不起作用

Question

我正在尝试使用“复选框”来更改元素的颜色。

HTML ：

<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div class="reklama">I'm controlled by toggle. No JavaScript!</div>

CSS ：

.reklama {
  color:Red;
}

input#toggle-1: checked ~ .reklama{
  color:green;  
}

你可以找到我的演示 here 。

Answer 1

您在“：checked”之前不能有任何空格，因此它直接连接到您的ID。这将适用于您的CSS

input#toggle-1:checked ~ .reklama{