html - 复选框黑客语法的困难

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>