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

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

<a href="#further-reading" title="Further reading resources" />
 
<!– … –>
 
<section id="further-resources" >
 
<!— … —>
 
</section>

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

#further-resources:target {
 
animation: highlight .8s ease-out;
 
}
 
@keyframes highlight {
 
0% { background-color: #FFFF66; }
 
100% { background-color: #FFFFFF; }
 
}

这技术要求你使用 CSS animation 在短暂时间内显示颜色，然后再次移除颜色 – 要点是高亮能足以引导用户注意到这里。看看 展示了这项技术运作的在线案例。

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

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

<a href="#search">Search</a>
 
<!– … –>
 
<div id="search">
 
<a href="#">Close</a>
 
<h4>Search articles archive.</h4>
 
<!– … –>
 
</div>

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

#search-overlay {
 
position: fixed;
 
top: 1em;
 
bottom: 1em;
 
right: 1em;
 
left: 1em;
 
/* … */
 
opacity: 0;
 
transition: opacity .3s ease-in-out;
 
pointer-events: none;
 
}

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

#search-overlay:target {
 
opacity: 1;
 
pointer-events: auto;
 
}

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

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

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

#search-overlay:target {
 
opacity: 1;
 
pointer-events: auto;
 
transition: opacity .3s ease-in-out;
 
}

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

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

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

 本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML/CSS频道！