除了链接到新页面，链接元素（<a> 标签）还可以引用到某章节、片段或其它同页面元素，而这几类链接普遍运用于同一页面的导航。

CSS 伪类选择器 :target 是文档内部链接，通过链接元素的 href 属性指定页面某部分，然后选择和为目标元素添加样式的。例如，如果你有一个锚点标签是链接到一篇文章的“深度阅读”部分…

…点击锚点链接后，你可以使用 :target 选择器强调目标元素，以引导阅读者眼球。该高亮技术是众所周知的褪黄技术，并在 37 Signals 首次使用。

See the Pen ogBWmL by Sara Soueidan (@SaraSoueidan) on CodePen.

上面案例给链接的目标元素应用了短暂的样式。但如果你应用更持久的样式，你可以创建缩放元素、改变它们可见度等等。

最近，我在 自己网站 上运用了这项技术，当浏览者想搜素文章时，搜索域覆盖整个页面。作为主导航的一部分，有一个链接是让搜索域覆盖整个页面 – 一个包含着搜索输入框的 <div> 标签。

这个搜索域初始时是通过使用 opacity : 0; 进行隐藏的。并通过 position : fixed; 让其相对于视口进行定位。为了确保它不会挡住它下面其余页面的鼠标事件，设置 pointer-events 为 none.

使用 :target 选择器后，一旦搜索锚点被点击，覆盖域就会显示，并将 pointer-event 再次设置为 auto。 为了让覆盖域显示过程更流畅，可通过 CSS3 的 transition 创建一个淡入淡出的效果。

搜索域淡入。任务完成一半 – 当用户再次请求时，我们需要确保它能淡出。

该覆盖域容器需包含其它允许我们回到主页面的链接。因此，我们打算给 body 或 html 元素一个 ID，并有一个关闭按钮链接到该 ID —这也能达到目的。然而，没有必要这样做。因为链接到非特定片段，只需将 # 作为它的值。实际上，无须为页面上的 URL 添加任何片段标识符，就能链接到主页面。

一旦关闭按钮链接被点击，我们希望搜索域淡出，所以我们为 #search-overlay:target 再次添加 transition ，并确保 opacity 能过渡到 0。  当然，如果想在用户关闭它时，让它立刻消失，你可以忽略这一步。

看看这个 在线案例。

你可以为搜索域添加变形动画，进一步增强效果。例如在淡入时伴随着放大效果 – 类似于（是的，你应该猜到了） Lightbox  效果。搜索域中不是搜索表单，而是一张图像的话，当你点击它的缩略图时，它会伴随能放大效果进入你的视线。Manoela Ilic 有一个很细致完整的图片 画廊 ，它就是基于这个效果做的。并且在它后面有一个教程，解释代码的运行。

Christian Heilmann 也写了一个关于如何使用 :target 选择器创建简易图片画廊的 帖子，并值得我们学习。

只使用 CSS 实现的图像画廊、模拟框 和 off-canvas 导航 都是功能齐全的 UI 组件案例。通过利用 :target 选择器的优势，它们只需使用 CSS 就可以完成。

我希望通过这篇文章的介绍，在你需要为目标元素添加样式时，CSS 伪类选择器能成为你实现方式之一。

更多教程和惊喜！