CSS Selectors: Using the :target pseudo-class in selectors

当URL指向文档的特定部分时，用户可能很难注意到。了解如何使用一些简单的CSS来吸引人们关注URL的目标并改善用户体验。

挑选目标

伪类 :target被用于样式URI的含片段标识符的目标元件。例如，URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example 包含片段标识符#example。在HTML中，由于二者共享相同的名称空间，所以标识符被认为是二者id或name属性的值。因此，示例URI将指向本文档中的标题“示例”。

假设你希望对任何h2一个URI的目标元素进行样式设计，但不希望其他类型的元素获得目标样式。这很简单：

h2:target { font-weight: bold; }

也可以创建特定于文档特定片段的样式。这是使用在URI中找到的相同标识值完成的。因此，要为#example片段添加边框，我们会写：

#example:target { border: 1px solid black; }

针对所有元素

如果目的是创建适用于所有目标元素的“blanket”样式，那么通用选择器就会派上用场：

:target { color: red; }

例子

在以下示例中，有五个链接指向同一文档中的元素。例如，选择“第一个”链接将<h1 id="one">成为目标元素。请注意，文档可能跳转到新的滚动位置，因为如果可能的话，目标元素被放置在浏览器窗口的顶部。

<h4 id="one">...</h4> <p id="two">...</p>
<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

结语

在片段标识符指向文档的一部分的情况下，读者可能会对他们应该阅读的文档的哪一部分感到困惑。通过对URI的目标进行设计，读者可以减少或消除混淆。