html - 我正在尝试使用复选框来更改元素的颜色，但它不起作用

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{