揭秘CSS(第 1 版)
2.6.1 链接伪类选择器
阅读(

概述

CSS选择器

概述

基本选择器

关系选择器

属性选择器

伪元素选择器

伪类选择器

伪类选择器,就是基于元素当前所处的状态来选取元素。由于状态通常是动态变化的,当元素处于一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可知,它是基于文档之外的抽象,所以称作伪类。

伪类选择器是CSS 中已经定义好的选择器,不能由用户随便起名,只能按CSS规定的标准格式进行使用。其语法为:

选择器:伪类名 { 属性: 值 }

链接伪类选择器

在CSS中,最常用的伪类选择器,就是使用在链接的锚元素上的选择器,用于定义不同状态下的链接样式。链接伪类并不存在于HTML中,只有当用户和网站交互时,才能体现出来。

表 2-5 链接伪类选择器
选择器功能描述版本
E:link选择未被访问过的链接1
E:visited选择已被访问过的链接1
E:active选择被激活(即鼠标已经按下、还没有释放)的E元素1
E:hover选择鼠标悬停其上的E元素1
E:focus选择获得焦点的E元素1

在HTML中,超链接是指所有带有 href 属性的a元素。可以使用链接伪类来区分未访问的链接和已访问的链接:

a:link { color: blue; }
a:visted { color: purple; }

当然,对于链接伪类,不仅可以应用颜色,还可以应用更多样式。如,对于已访问的链接,除了紫色外,还可以有一条删除线。

尽管 :link 和 :visted 非常有用,但它们是静态的,第一次显示之后,它们不会再改变元素的样式。并且,它们只用于锚元素,因此被称作链接伪类或锚伪类。

而 :hover、 :focus、:active 则不同它们可以根据用户行为动态改变文档的外观,故被称为动态伪类,或用户行为伪类。

最初,动态伪类总是用来设置超链接的样式,不过,现在它们可以应用到任何元素。如在表格的行上使用 :hover 伪类,表单的文本输入框是使用 :focus 伪类,表单的提交按钮上使用 :active 伪类等。如:

tr:hover {
   background: #c1d5eb; 
}
input:focus {
   outline: 1px solid #c1d5eb; 
}

另外,还可以把链接伪类结合在一起使用,来创造更丰富的样式。如,定义已被访问链接的悬停效果:

a:visited:hover { 
   color: #888;
}

用哪种书写顺序并不重要,a:visited:hover 和a:hover:visited 将会得到相同的效果。但是,不要把互斥的伪类结合在一起,如,一个链接不能同时是未访问和已访问状态,因此a:link:visited 没有任何意义。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验