复选框破解语法困难

Question

我要设置标签样式并在选中复选框时显示div。 我已经找到了做一个或另一个的方法，但是没有两个都做，而且我不明白为什么。 请注意，两个示例中的CSS完全相同，并且为：

input {
  display: none
}

.layerpic {
  height: 100px;
  width: 100px;
  background: red;
  opacity: 1;
  float: left;
}

label {
  clear: none;
  float: left;
}

.xyz input:checked + .layerpic{
    opacity: 0.5;
}

.xyz input:checked + label {
    font-weight: bold;
}

现在是HTML。 此示例使div受到影响，但标签不受影响。 请注意，唯一的区别是html中的标签位于输入之前：

<div class ="xyz">
  <label class="ribs" for="hider2">Hide layer</label>
  <input type="checkbox" id="hider2">
  <div class="layerpic"> hi
  </div>
</div>

此示例允许标签受到影响，但div不受影响：

<div class ="xyz">
  <input type="checkbox" id="hider2">
  <label class="ribs" for="hider2">Hide layer</label>
  <div class="layerpic"> hi
  </div>
</div>

谁能解释为什么仅通过翻转最先出现的HTML会影响不同的元素，并且选中此复选框时是否有可能同时影响这两个元素？

Answer 1

您需要重新排列HTML，然后使用+和~选择器

 input { display: none } .layerpic { height: 100px; width: 100px; background: red; opacity: 1; float: left; } label { clear: none; float: left; } .xyz input:checked+.layerpic { opacity: 0.5; } .xyz input:checked~label { font-weight: bold; } 

 <div class="xyz"> <input type="checkbox" id="hider2"> <div class="layerpic"> hi</div> <label class="ribs" for="hider2">Hide layer</label> </div>