CSS 目标伪类选择器

一个URI，除了可以直接指向某文档外，还可以通过井号（#）后跟一个锚点或元素 id，来指向页面的某个特定元素。

目标伪类选择器，就是用来匹配页面上被URI的某个标识符指定的目标元素，并为它应用样式。

表 2-8 目标伪类选择器

选择器	功能描述	版本
E:target	选择该文档中特定“id”的元素	3

假如在 index.htm 页面中有 3 个<a>元素，id 为catlog、about、contact，它们分别代表一个书签。HTML代码如下：

1. <a id="catlog" href="#catlog">商品分类</a>
2. <a id="about" href="#about">联系我们</a>
3. <a id="contact" href="#contact">关于我们</a>

假如有一个外部链接，<a href="index.htm#contact ">关于我们</a>，就表示链接的目标为index.htm 文档中 id 为contact 的书签。当用户点击该链接时，跳转到index.htm 文档后，页面会向下滚动到 contact 书签的位置。

如果页面内容非常多，常常很难看出链接跳转到了哪个书签的位置。这种情况下，就可以使用目标伪类选择器 :target，为目标元素设置特殊的样式。这样，用户进入页面后，就会一目了然。CSS代码如下：

1. a:target {
2. color: #fff;
3. background: #fa7a20;
4. }

上述代码为目标超链接元素 a 定义了特殊的背景颜色，用户进入页面后，跳转到任何一个书签时，都可以提醒用户当前所处的书签位置。运行结果如图 2‑21 所示：

图2-21 目标伪类选择器

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。