CSS点击显示隐藏功能是一种非常实用的技术，可以让我们在网页设计中实现一些有趣的效果。以下是一个使用CSS点击显示和隐藏的实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS点击显示隐藏</title>
<style>
.content {
display: none;
}
.show-hide {
cursor: pointer;
text-decoration: underline;
}
.show-hide:hover {
color: red;
}
.show-hide.active + .content {
display: block;
}
</style>
</head>
<body>
<p class="show-hide">点击显示/隐藏</p>
<p class="content">这是要显示或隐藏的内容！</p>
</body>
</html> 我们首先将要显示或隐藏的内容的display属性设置为none，然后在show-hide类上添加一些样式。当show-hide类的元素被点击时，我们添加一个active类。接下来，我们使用CSS选择器通配符和相邻选择器（+）来设置当active类在show-hide上时，我们可以将要显示或隐藏的内容的display设置为block，从而显示出来。
这是一种非常简便的方法，可以让我们轻松地使用CSS实现点击显示和隐藏效果。不过需要注意的是，这种方法可能会影响SEO，因此在使用时需要考虑到这一点。
