在 Web 开发的早期，当 CSS2 获得支持时，我总是对“仅 CSS”的演示感到畏缩，因为其中许多演示至少可以说是很蹩脚的。随着 CSS 的成长和拥有真正的交互功能，我认为现在是重新考虑的时候了——当你想到它时，视觉效果和交互性应该在 CSS 中维护，而不是在 JavaScript 和 CSS 中。

有了我们在新浏览器中的支持，不使用已经实现的功能将是一种浪费。如果你必须把所有的视觉效果交给 IE6，好吧，那你必须使用像 jQuery 这样的库来实现你的效果。但是，如果你不给那些老旧的浏览器提供华丽的效果，而是给它们一个更简单的界面，并确保它们不会得到它们无法理解的东西，那么你就可以鱼与熊掌兼得。

因此，今天让我们看看一个使用 目标选择器 的图片库。这之前已经做过（灯箱示例，缩略图预览示例），但我认为解释一下正在发生的事情的细节会很好。

所以，这里有一个屏幕截图，展示了我们的“仅 CSS 图片库”的运行情况，你可以 亲自查看。

从 HTML 开始

我们从一个在所有浏览器中都能正常工作的 HTML 开始（除了 IE < 9，你需要 一个 polyfill 来为 HTML5 元素设置样式）。

没有任何 CSS，这只会以垂直列的形式显示所有的小猫图片，并且链接会指向它们。这有效，对于 IE6 用户来说，这已经足够了。

但是，对于支持较新 CSS 的浏览器，我们可以通过几个简单的步骤将其变成我们的画廊。

步骤 1：定位文章

为了确保我们不给 IE9 之前的版本提供任何它无法处理的 CSS，我们可以将所有选择器包装在一个简单的媒体查询中（在本例中，检查窗口宽度是否至少为 400 像素）。

@media screen and (min-width: 400px) {
  ... all the good stuff ...
}

然后我们可以给画廊设置尺寸，并设置 overflow 为 hidden，以确保位于画廊外部的元素不会显示。我们还将其定位为 relative，以便每个定位的子元素都相对于它定位。

.gallery {
  position: relative;
  height: 280px;
  width: 340px;
  overflow: hidden;
}

然后我们将所有目标元素绝对定位在画廊中，距离左边 320 像素。由于我们隐藏了溢出，因此这会将它们隐藏在屏幕外。

.target {
  position: absolute;
  top: 60px;
  left: -320px;
  height: 220px;
  width: 300px;
}

现在，为了在点击指向图片的链接时显示图片，我们使用 :target 选择器。当元素被定位时，它会将 CSS 分配给该元素——无论是通过激活文档中的指向该元素的链接，还是在页面加载时从 URL 中定位。使用这个伪选择器，我们可以覆盖左边的设置，将其移动到距离左边 20 像素的位置，从而显示图片。

.target:target {
  left: 20px;
}

你可以 自己尝试一下

JSFiddle 演示.

为了使它更平滑，我们只需将 CSS 过渡添加到目标样式中。现在，所有对样式的更改将在 1 秒内平滑地发生，而不是立即发生。

.target {
  position: absolute;
  top: 60px;
  left: -320px;
  height: 220px;
  width: 300px;
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}

再次，看看它的实际效果，并尝试一下。

JSFiddle 演示.

这就是全部——其他效果只是相同技巧的不同变体——将不透明度从 0 动画到 1，或者使用 CSS 过渡。

目标选择器可能是一个非常强大的技巧。但是，它们的主要问题是页面会滚动到目标位置，因此如果链接和目标位置之间有很大的距离，你将看到难看的跳跃。