css点击显示隐藏内容

CSS 点击显示隐藏内容是一个很常见的需求，比如在网页中，我们需要点击某个按钮后，弹出一些隐藏的内容。这种功能可以通过 CSS 来实现，不需要使用 JavaScript。

<style>
  
  .hidden-content {
  
   
   display: none;
  
}
  
  .show-content:checked ~ .hidden-content {
  
   
   display: block;
  
}
</style>
<input type="checkbox" id="show" class="show-content">
<label for="show">点击显示内容</label>
<div class="hidden-content">
  
  <p>这里是需要隐藏的内容</p>
</div> 

上面的代码中，我们创建了一个隐藏的 div 元素，并给它设置了一个类名 .hidden-content，然后在样式表中指定了它的 display 属性为 none，即不显示。

接着，我们创建了一个 input 元素，并将其类型指定为 checkbox，这个 checkbox 的 id 为 show，并给它添加了一个类名 .show-content。我们通过一个 label 元素来触发 checkbox 的选中状态。

最后，我们使用 CSS 选择器 .show-content:checked ~ .hidden-content 来设置当 checkbox 被选中时，.hidden-content 的 display 属性为 block，从而显示内容。

这是一种很方便的方法来实现点击显示隐藏内容，而且不需要使用 JavaScript。这种方法可以使页面加载更快、更高效。