不带Javascript的图片库

Question

我目前正尝试在不使用JS的情况下在我的主页上实现一个图片库。

我在网上有以下代码，但我不明白中间这行到底在做什么。

.image-gallery .big-image a:target img {display:block;}
.image-gallery .big-image a:target ~ img#default {display:none; width:1px;}
.image-gallery .big-image img#default {display:block;}

波浪号应该连接父映像(a:target)和#default图像。我知道目标应该做什么，但是a之后的target应该做什么呢？我为什么需要它？

Answer 1

由于您没有提供标记，因此很难提供具体的答案。但是，下面的文章应该提供必要的信息来描述~和:目标选择器。

http://css-tricks.com/almanac/selectors/t/target/

http://css-tricks.com/almanac/selectors/g/general-sibling/

我从所提供的东西中得到的最有根据的猜测是:target被用来直接深度链接到图库中的图像。例如，如果用户要转到图库中的图像3，则URL可能会更改为/gallery#3，如果他们共享了该URL，图库将自动转到图库中的第三个图像。如果用户深度链接到某个图像，"~ img#default“可能会隐藏默认的起始图像。同样，这只是一个猜测，因为没有提供任何标记。