Question

我试图通过检查标签及其输入来更改item1 div的颜色。出于某种原因，它仅在您检查前两个复选框而不是最后一个复选框时才有效。你能解释一下为什么会这样吗？

  <style type="text/css">
     .item1 {
     width: 100px;
     height: 100px;
     }
     #item-1:checked + label .item1 {
     background: red;
     } 
     #item-2:checked + label .item1 {
     background: blue;
     }
     #item-3:checked + label .item1 {
     background: purple;
     }
  </style>


  <label for="item-1"> label 1
  <input type="checkbox" name="" id="item-1">
  <label for="item-2"> label 2
  <input type="checkbox" name="" id="item-2">
  <label for="item-3"> label 3
  <input type="checkbox" name="" id="item-3">
  <div class="item1">
  </div>

Answer 1

实际上，由于您没有标签的结束标签，因此在浏览器解析您的HTML后，它将如下所示：

<label for="item-1"> label 1
    <input type="checkbox" name="" id="item-1">
    <label for="item-2"> label 2
        <input type="checkbox" name="" id="item-2">
        <label for="item-3"> label 3
            <input type="checkbox" name="" id="item-3">
            <div class="item1">
            </div>
        </label>
    </label>
</label>

由于<input type="checkbox" name="" id="item-3">之后没有标签，您可以通过更改最后的css规则使其工作：

#item-3:checked + .item1 {
  background: purple;
}

使用标签和复选框更改div颜色

1 个答案: