css中点击切换图片

p标签：
在网页开发中，图片的展示是非常重要的。而有时候，我们需要在页面中展示多张图片，但又不希望过多的占用页面空间，这时候就需要使用点击切换图片功能。在CSS中，我们可以很轻松的实现这种功能，下面一起来学习。
pre标签：

/* HTML代码 */
<div class="gallery">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

/* CSS代码 */
.gallery img:not(:first-child) {
  display: none;
}

.gallery img:checked {
  display: block;
}

.gallery input[type="radio"] {
  display: none;
} 

解释：
首先，在HTML中，我们需要将所有的图片放在一个div标签中，并使用img标签来展示图片。需要注意的是，我们需要为每一个图片设置一个唯一的src属性。
接着，在CSS中，我们需要隐藏所有的除第一张以外的图片。这里我们使用了:not(:first-child)伪类，表示除第一张以外的所有img标签。通过将display属性设置为none，我们可以将图片隐藏起来。
然后，我们需要设置一个标签，用来触发图片的切换。这里，我们将其设置为display:none，使其在页面中不可见。
最后，在CSS中，我们使用:checked伪类元素，将选中的标签与对应的图片展示出来，即将display属性设置为block。
这样，我们就完成了图片的点击切换效果。同样的方法，也可以用在其他元素的切换中，例如文字、样式等。