纯CSS如何在复选框被点击时关闭一个div

Question

我正在尝试使用仅CSS而非JQuery或Javascript在复选框被点击时关闭一个div，但它似乎不能正常工作。我该如何调整它？

    div[id^="div-"] {
      display: block;
    }
    div[id^="div-"]:target {
     display: none;
    }

    <a href="#div-1"><input type="checkbox" checked></a>
    <div id="div-1">          
         Here is the content. 
    </div>

我该如何将标签的点击和复选框联系在一起？

- Gene9y

---

为了帮助我们识别问题并更快地得到您需要的答案，您能否提供任何其他信息？如果有错误，您看到了什么错误？您期望得到什么结果？ - Hopeful Llama

标记答案为正确，如果有任何一项。 - Zenel Rrushi

Answer 1

#text{
  width:100px;
  height:100px;
  background:black;
}
input[type=checkbox]:checked ~ #text{
display:none;
 
}

<input type="checkbox" name="check" value="checked">Click here<br>
<div id="text"></div>

- Gowtham

Answer 2

只使用CSS，您可以做出类似于这样的效果。

JSFiddle

+ 是相邻兄弟选择器，在https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors上有更多信息。

#close + #div-1 {
    display: none;
}

#close:checked + #div-1 {
    display: initial;
}

<input id="close" type="checkbox" checked />
<div id="div-1">Here is the content.</div>

- David Hartley

Answer 3

我认为只有使用纯CSS的方式才能实现这一点，需要将复选框作为div的直接兄弟元素：

#div-1 {display:none}
#checkbox:checked + #div-1 {display:block;}

<input id="checkbox" type="checkbox" checked>
<div id="div-1">          
     Here is the content. 
</div>

- user1987162

Answer 4

首先，您应该删除锚点，只保留输入元素，因为我展示的这个技巧需要在同一级别的元素中或第二个元素在HTML结构的较低级别中。

<input type="checkbox" checked>
<div id="div-1">          
     Here is the content. 
</div

CSS

div[id^="div-"] {
    display: block;
}


input:checked ~ div[id^="div-"] {
    display: none;
}

jsfiddle

- Zenel Rrushi