选中复选框时设置元素样式

Question

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
    <span></span>
    <span></span>
</div>

我想在选中复选框时设置样式范围.我试过下面的风格,但它不起作用.

input:checked ~ div span{
    background: red;
}

input:checked~div span {
  background: red;
}

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
  <span></span>
  <span></span>
</div>

Answer 1

把一些内容放在你的范围内,它正在发挥作用.

input:checked ~ div span{
    background: red;
}

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
    <span>Red Text</span>
    <span>Red alert</span>
</div>