使用纯 css 单击复选框时关闭 div

Question

我试图在使用 css 单击复选框时关闭 div，但不是 JQuery 或 Javascript，但它似乎无法正常工作。我该如何调整它？

    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>

如何 link <a> 单击和复选框？

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>

Answer 2

只使用 CSS 你可以做这样的事情。

#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>

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>

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;
}

close a div when a checkbox clicked with pure css