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，然后使用 + 和 ~ 选择器

＆＃13;

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;
}

＆＃13;

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

＆＃13;

复选框黑客语法难度大

1 个答案: