html - 复选框隐藏 Hack

Question

我尝试隐藏/显示 div“游戏类型”，但如果输入复选框在列表项中，则以下代码不会运行，我不明白为什么

是否可以在不使用 js 的情况下使用“no-game”输入禁用“pc”和“xbox”输入？

input[type = checkbox]# no - game: checked~#gametype {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section>
    <h3>Worauf spielst du:</h3>
    <ul>
      <li>
        <input id="PC" name="PC" type="checkbox">
        <label for="PC" class="side-label">PC</label>
      </li>
      <li>
        <input id="Xbox" name="Xbox" type="checkbox">
        <label for="Xbox" class="side-label">Xbox</label>
      </li>
      <li>
        <input id="no-game" name="no-game" type="checkbox" checked>
        <label for="no-game" class="side-label">nichts</label>
      </li>
      <div id="gametype" class="gametype">
        <h3>Was spielst du:</h3>
        <li>
          <input id="MMO" name="MMO" type="checkbox">
          <label for="MMO" class="side-label">MMO</label>
        </li>
        <li>
          <input id="RPG" name="RPG" type="checkbox">
          <label for="RPG" class="side-label">RPG</label>
        </li>
        <li>
          <input id="Shooter" name="Shooter" type="checkbox">
          <label for="Shooter" class="side-label">Shooter</label>
        </li>
      </div>
    </ul>
  </section>
</div>

Answer 1

您的选择器有误。应该是:

input#no-game:checked ~ #gametype {