CSS的一大魅力就是能够使用简单的样式语句实现交互效果。其中一种常见的交互效果就是点击显示或隐藏某个元素或内容区块。
实现这个效果的方法非常简单，只需要利用CSS中的:checked伪类和+:checked选择器以及display属性即可。
<p>＜input type="checkbox" id="toggle-btn">＜/input> </p> <p>＜label for="toggle-btn">点击我显示/隐藏内容＜/label> </p> <p>＜div class="content">这里是要隐藏和显示的内容＜/div> </p><code>.content{ display:none; } </p> .prechecked＋.content{ display:block; } </p> :checked是checkbox的选中状态，表示当checkbox被选中时，以下的样式将被应用。我们给checkbox设置id为toggle-btn，然后给label设置for值为toggle-btn，这样当点击label时就会选中checkbox。又因为我们使用了+:checked选择器，所以当checkbox被选中时，它后面的.content将被应用预先定义好的样式display:block;。这样.content元素就会显示出来。反之，当checkbox未选中时，.content元素的display属性为none，那么它就会被隐藏。
以上就是使用CSS实现点击显示或隐藏内容的方法。它简单易懂，易于实现，同时还支持多个不同的区块实现类似的效果。使用这种方法，我们可以在网页中实现不少实用和好看的效果。
