CSS点击显示隐藏卡片

/* 首先定义隐藏的卡片 */
.card-hidden {
display: none;
}
/* 当点击显示按钮时，显示卡片 */
.show-card:focus + .card-hidden {
display: flex;
}

经常会遇到需要点击才能显示或隐藏某些内容的页面设计。这种操作往往需要使用JavaScript实现，但实际上使用CSS也可以轻松实现这种效果。

在这个示例中，我们将展示如何使用CSS点击显示隐藏卡片。首先，我们创建一个隐藏卡片，并将其定义为不可见状态。这可以通过下面的代码完成：

.card-hidden {
display: none;
}

现在，我们需要创建一个显示卡片的按钮，并且当用户点击该按钮时，我们需要显示该卡片。然而，我们无法实现点击事件的监听，因为我们在使用CSS，不过我们可以利用:focus伪类，当用户点击该按钮时，该按钮被聚焦，并且我们可以在:focus状态下选择隐藏卡片并将其显示。下面是代码：

.show-card:focus + .card-hidden {
display: flex;
}

在上面的代码中，我们选择.show-card:focus状态下的相邻元素.card-hidden，并将其显示。

现在，我们可以将这两个元素放在一起，就可以实现点击显示隐藏卡片的效果。下面是完整的例子：

<button class="show-card">显示卡片</button>
<div class="card-hidden">
<p>这是隐藏的卡片内容</p>
</div>