css点击标题显示内容

CSS点击标题显示内容是网页开发中常见的功能，可以让页面更加具有交互性和易读性。下面我们就来介绍一下实现这一功能的方法。

/*CSS部分*/
.content{
  display: none;
 /*初始状态隐藏内容*/
}
.title:hover + .content, .title:active + .content{
  display: block;
 /*鼠标移至标题或标题被点击时显示内容*/
}
/*HTML部分*/
<div class="container">
  <h3 class="title">标题1</h3>
  <p class="content">内容1</p>
  <h3 class="title">标题2</h3>
  <p class="content">内容2</p>
  <h3 class="title">标题3</h3>
  <p class="content">内容3</p>
</div> 

首先，我们将要控制的内容设置为初始状态下不显示。然后，通过:hover伪类和 :active伪类来让鼠标可以触发显示内容的效果。当鼠标移至标题上或者标题被点击时，被选中的标题的兄弟元素（也就是.content）将被显示出来。

在HTML部分，我们将要操作的标题和内容都置于一个容器中。标题使用h3标签，内容使用p标签，两者都拥有对应的类名以方便CSS选择器进行定位。注意，被选中的标题和其对应的内容应该是紧邻的兄弟元素，这样我们才可以使用CSS选择器找到它们之间的关系，并让它们互相影响。

通过这种方式，我们就可以在页面中实现点击标题显示对应内容的效果了。这种方法简单有效，极大地提升了页面的交互性。