CSS速成指南(13)

2.9  伪类

只在样式表中使用的许多选择器和类在HTML中没有匹配的标记或特性。它们的任务是使用除名称和特性外的特征或不能从文档树中推论的内容对元素进行分类。其中包括像first-line、first-child和first-letter这样的伪类。

伪类通过冒号(:)与元素隔开。要创建一个名为bigfirst的类来突出元素的第一个字母,可使用下列规则:

.bigfirst:first-letter {

font-size :400%;

float  :left;

}

当将bigfirst类应用于一个元素时,第一个字母的显示尺寸会放大,而其余文本(正常大小)整齐地围绕着它(因为有float属性),就好像第一个字母是一幅图像或其他对象一样。

其他伪类包括hover、link、active和visited,这些主要应用于锚元素,如下规则所示,其将所有链接的默认颜色设置为蓝色,已访问过的链接为淡蓝色:

a:link  { color:blue; }

a:visited { color:lightblue; }

下列一对规则很有意思,因为它使用hover伪类,这意味着它们只在鼠标指针悬停在元素上方时才应用。在这个例子中,将链接改为红底白字,实现了只有靠JavaScript代码才能实现的动态效果:

a:hover {

color  ??:white;

background:red;

}

这里,使用了只有单个参数的background属性而不是较长的background-color属性。active伪类也是动态的,因为它在按下和释放鼠标按钮之间改变链接显示——如下规则所示,它将链接的颜色改为深蓝色:

a:active { color:darkblue; }

另一个有趣的动态伪类是focus,它只在元素被用户通过键盘或鼠标选择而获得焦点时应用,如下规则所示,其使用通用选择器总是在当前获得焦点的对象周围加一个中灰的、2像素的虚线边框:

*:focus { border:2px dotted #888888; }

读书导航