使用输入[type =＆＃39;复选框＆＃39;]：选中选择器

Question

我正在尝试在html页面中显示或隐藏段落。 html代码是：

<input type="checkbox" id="show"> Show/Hide
<p id="toggle">Lorem ipsum dolor sit amet</p>
</div>

然后我使用CSS3隐藏/显示段落：

 #toggle {
 display:none;
 }

#show:checked ~ p {
    display: block;
}

这确实有效。但如果我尝试：

#toggle {
  display:none;
}

input[type='checkbox']:checked ~ p {
   display: block;
   }

这不再适用了。我不明白为什么。这个选择器有错误吗？

  input[type='checkbox']:checked

感谢您的帮助!!!

Answer 1

这与CSS特异性有关 查看specificity hierarchy 时，您会看到 id 会超出元素。

这意味着 #toggle更具体，然后：
input[type='checkbox']:checked ~ p
因此id会否决元素选择器。

所以，使用：

#toggle {
  display: none;
}

input[type='checkbox']:checked ~ p#toggle {
  display: block;
}

<div>
  <input type="checkbox" id="show"> Show/Hide
  <p id="toggle">Lorem ipsum dolor sit amet</p>
</div>

或者：

input[type='checkbox'] ~ p{
  display: none;
}

input[type='checkbox']:checked ~ p {
  display: block;
}

<div>
  <input type="checkbox" id="show"> Show/Hide
  <p id="toggle">Lorem ipsum dolor sit amet</p>
</div>