带有复选框hack

Question

我不是CSS的专家，我不能为我的生活获得显示div的选中选项。在我看来，这应该有效，但事实并非如此。任何帮助将不胜感激。我认为问题在于这行代码。

.mobile-trigger:checked ~ .drop {
display: block;
}

Example

Answer 1

默认情况下，您必须隐藏内容，一旦选中输入，display: block就会显示该内容。请注意，一般兄弟组合器~ “将两个选择器分开，并且仅当第二个元素前面有第一个元素时才匹配第二个元素，并且它们共享一个共同的父”所以必须是显示必须是复选框后的兄弟姐妹。

.drop {
  display: none;
}
.mobile-trigger:checked ~ .drop {
  display: block;
}

<input type="checkbox" class="mobile-trigger">
<div class="drop">test</div>

参考：MDN - General sibling selectors