仅使用CSS隐藏Div

Question

有没有办法只在点击链接时用css隐藏div。我没有制作需要能够在没有JS时关闭的弹出窗口。我已经尝试了各种方法但是当按钮位于需要隐藏的div内时它们没有工作。

Answer 1

  

当按钮位于需要隐藏的div内时。

简答：不，当按钮位于元素内部时，您无法实现此目的。 ^{感谢Joseph Marikle}

但是，当按钮位于div之外时，您可以实现此目的。

#hide {
  display: none;
}
label {
  cursor: pointer;
  text-decoration: underline;
}
#hide:checked ~ #randomDiv {
  display: none;
}

<input type="checkbox" id="hide" />


<div id="randomDiv">
  This is a div
  <label for="hide">Hide div</label>
</div>

Answer 2

以下示例在选中复选框时隐藏div。

它使用#closebutton ~ #targetdiv {...选择器，只适用于此订单上的元素。因此，复选框位于布局上的主div内部，但在代码之前。

.main {
  border-radius: 5px;
  padding: 30px;
  margin-bottom: 5px;
}

#A {
  background: gold;
}

#B {
  background: skyblue; 
}

#C {
  background: yellowgreen; 
}

.close {
  float: right;
  margin-top: 30px;
  margin-right: 75px;
  height: 20px;
  width: 20px;
}

.close:checked {
  display: none;
}

.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C {
  display: none;
}

body {
  overflow-y: scroll;  
}

<div id=groupA><input class="close" type="checkbox">
<div id=A class=main>info A</div></div>

<div id=groupB><input class="close" type="checkbox">
<div id=B class=main>info B</div></div>

<div id=groupC><input class="close" type="checkbox">
<div id=C class=main>info C</div></div>

Answer 3

id:254