WEB标准学习路程之”CSS”:10.伪类选择符

原作者:hve 出处:5D多媒体
发表时间:2002-3-1 关键词:CSS
阅读次数:5353 次 发表信息 :
版权信息:传统媒体及商业网站禁止擅自转载;个人网站转载请署名作者和出处。
 

 

三、  伪类——动态链接

伪类-单独存在是没有意义的.

伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

 

1.  语法

Pseudo-Classes
伪类

伪类的语法是在原有的语法里加上一个伪类(pseudo-class):
selector:pseudo-class {property: value}
(选择符:伪类 {属性: 值})
伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。

CSS Version
版本

类选择符及其他选择符也同样可以和伪类混用:
selector.class:pseudo-class {property: value}
(选择符.类:伪类 {属性: 值})

Compatibility
兼容性

2.  锚的伪类

Description
简介

我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态:link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定义不同的效果:
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接
*/
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上
*/
a:active {color: #0000FF; text-decoration: underline} /* 激活链接
*/
(上面这个例子中,这个链接未访问时的颜色是红色并无下划线,访问后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标在链接上时为紫色并有下划线)
注意:有时这个链接访问前鼠标指向链接时有效果,而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面,这样的话由于后面的优先级高,当访问链接后就忽略了a:hover的效果。所以根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link,
a:visited, a:hover, a:actived的顺序书写。

:link

3.  伪类和类选择符

CSS1

澳门新葡亰手机版,将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上:
<a class=”red” href=”…”>这是第一组链接</a>
<a class=”blue” href=”…”>这是第二组链接</a>

IE4+ , NS4+

4.  其他伪类

设置a对象在未被访问前的样式表属性

此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。
下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍:
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
这是一个段落,这个段落的首字被放大了。
</p>

:hover

我们再定义一个首行样式的例子:
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
这是段落的第一行
这是段落的第二行
这是段落的第三行
</p>
</div>
(上例中段落的第一行为红色,第二、三行为默认颜色)

CSS1/CSS2

注意:首字和首行的伪类需要IE5.5以上的版本支持。

IE4+ , NS4+

设置对象在其鼠标悬停时的样式表属性

:active

CSS1/CSS2

IE4+

设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性

:visited

CSS1

IE4+ , NS4+

设置a对象在其链接地址已被访问过时的样式表属性

:focus

CSS2

NONE

设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性

:first-child

CSS2

NONE

设置对象(Selector1)的第一个子对象(Selector2)的样式表属性

:first

CSS2

IE4+

设置页面容器第一页使用的样式表属性。仅用于@page规则

:left

CSS2

IE4+

设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则

:right

CSS2

IE4+

设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则

:lang

CSS2

NONE

设置对象使用特殊语言的内容样式表属性

:link

语法: Selector :
link { sRules }

 

说明: 

设置a对象在未被访问前的样式表属性。

IE3将:link伪类的样式表属性作用于visited伪类。

默认值由浏览器决定。

对于无href属性(特性)的a对象,此伪类不发生作用。

请参阅body对象的link属性(特性)和document对象的linkColor特性。详见我编写的其他书目。

 

示例: a:link {
font-size: 14pt; text-decoration: underline; color: blue; }

 

:hover

语法: Selector :
hover { sRules }

 

说明: 

设置对象在其鼠标悬停时的样式表属性。

在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

目前IE5.5+仅支持CSS1中的:hover。

 

示例: 

a:hover
{ font-size: 14pt; text-decoration: underline; color: blue; }

a:hover
span{ color:red; }

:active

语法: Selector :
active { sRules }

 

说明: 

设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。

在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。

目前IE5.5+仅支持CSS1中的:active。

 

示例: a:active {
font-size: 14pt; text-decoration: underline; color: blue; }

 

:visited

语法: Selector :
visited { sRules }

 

说明: 

设置a对象在其链接地址已被访问过时的样式表属性。

IE3将:link伪类的样式表属性作用于visited伪类。

默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。

对于无href属性(特性)的a对象,此伪类不发生作用。

请参阅body对象的vlink属性(特性)和document对象的vlinkColor特性。详见我编写的其他书目。

 

示例: a:visited {
font-size: 14pt; text-decoration: underline; color: blue; }

:focus

语法: Selector :
focus { sRules }

 

说明:

设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。

目前IE5.5尚不支持此属性。