复选框 hack 语法的困难

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>