css点击按钮隐藏div

在网页开发中，我们常常需要控制显示与隐藏某个元素。通过使用CSS，我们能够轻松实现一个点击按钮隐藏div的效果。

HTML代码：
<button id="myButton">隐藏div</button>
<div id="myDiv">这是要隐藏的内容</div>
CSS代码：
#myDiv {
  display: block;
}
#myButton {
  cursor: pointer;
}
#myButton:focus ~ #myDiv {
  display: none;
}
 

在上述代码中，我们给按钮和要隐藏的div分别指定了ID。按钮的点击效果通过CSS中的:focus伪类来实现。当按钮被点击时，它会获得焦点，此时我们使用CSS中的相邻兄弟选择器来控制要隐藏的div的显示与隐藏。

在这个例子中，我们初始设置div为display:block，表示它在页面上一开始是显示的。当我们点击按钮时，按钮获得焦点，此时我们通过CSS选择器#myButton:focus ~ #myDiv来将之前用display: block设置的div隐藏起来，从而实现了隐藏div的效果。

实现这个功能的关键在于将按钮和要隐藏的div联系起来，这可以通过ID来实现。同时，我们需要使用CSS中的:focus伪类和相邻兄弟选择器来实现点击按钮隐藏div的效果。