复选框隐藏黑客

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 {

Answer 2

发生这种情况是因为〜选择器仅与其同级匹配
以纯CSS的方式进行操作，我建议将gametype元素设为输入的同级

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

 <div class="container"> <section> <h3>Worauf spielst du:</h3> <input id="PC" name="PC" type="checkbox"> <label for="PC" class="side-label">PC</label> <input id="Xbox" name="Xbox" type="checkbox"> <label for="Xbox" class="side-label">Xbox</label> <input id="no-game" name="no-game" type="checkbox" checked> <label for="no-game" class="side-label">nichts</label> <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> </section> </div> 

Answer 3

实际上，您错过了复选框文本的双引号

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