揭秘CSS(第 1 版)
2.6.4 目标伪类选择器
阅读(

概述

CSS选择器

概述

基本选择器

关系选择器

属性选择器

伪元素选择器

伪类选择器

否定伪类选择器

结构伪类选择器

链接伪类选择器

目标伪类选择器

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

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

表 2-8 目标伪类选择器
选择器功能描述版本
E:target选择该文档中特定“id”的元素3

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

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

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

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

a:target  {
    color: #fff;
    background: #fa7a20; 
}

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

目标伪类选择器
图2-21 目标伪类选择器

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验