WEB标准学习路程之"CSS"：10.伪类选择符
伪类－单独存在是没有意义的.
|
Pseudo-Classes |
CSS Version |
Compatibility |
Description |
|||||
|
CSS1 |
IE4+ , NS4+ |
设置a对象在未被访问前的样式表属性 |
||||||
|
CSS1/CSS2 |
IE4+ , NS4+ |
设置对象在其鼠标悬停时的样式表属性 |
||||||
|
CSS1/CSS2 |
IE4+ |
设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性 |
||||||
|
CSS1 |
IE4+ , NS4+ |
设置a对象在其链接地址已被访问过时的样式表属性 |
||||||
|
CSS2 |
NONE |
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性 |
||||||
|
CSS2 |
NONE |
设置对象（Selector1）的第一个子对象（Selector2）的样式表属性 |
||||||
|
CSS2 |
IE4+ |
设置页面容器第一页使用的样式表属性。仅用于@page规则 |
||||||
|
CSS2 |
IE4+ |
设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则 |
||||||
|
CSS2 |
IE4+ |
设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则 |
||||||
|
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尚不支持此属性。
示例：
a:focus { font-size: 14pt; text-decoration: underline; color: blue; }
a:focus img { border: thin solid green }
:first-letter
语法： Selector : first-letter { sRules }
说明：
设置对象内的第一个字符的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。
在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
示例：
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }
:first-line
语法： Selector : first-line { sRules }
说明：
设置对象内的第一行的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。
如果未强制指定对象的width属性，首行的内容长度可能不是固定的。
示例：
p a:first-line { color: green }
div:first-line { color:red;font-size:16px; }
:first-child
语法： Selector1 Selector2 : first-child { sRules }
说明：
设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。
目前IE5.5尚不支持此伪类。
示例：
p a:first-child { color: green }
table td:first-child { width:200px; }
:first
语法： Selector : first { sRules }
说明：设置页面容器第一页使用的样式表属性。仅用于@page规则。
示例： @page :first { margin: 4cm }
:left
语法： Selector : left { sRules }
说明：设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。
示例： @page :left { margin: 4cm }
:right
语法： Selector : right { sRules }
说明：设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。
示例： @page :right { margin: 4cm }
:lang
语法： Selector : lang { sRules }
说明：
设置对象使用特殊语言的内容样式表属性。
目前IE5.5尚不支持此属性。
示例： blockquote:lang(fr) { quotes: '?' ' ?' } //使用法语显示由quotes属性指定的法语的嵌套标记
A的使用：
<style type="text/css">
<!--
a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}
a:link { font-size: 9pt; color: #006699; text-decoration: underline}
a:visited { font-size: 9pt; color: #006699; text-decoration: underline}
a:active { font-size: 9pt; color: #FF0000; text-decoration: none}
a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}
a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}
a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}
a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}
-->
</style>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#">下划线链接 </a>
<a href="#" class="r1">双下划线链接</a>
补充说明：
a:hover 表示鼠标划过时的样式.
a:link 表示链接的样式.
a:active 表示当前活动连接的样式.
a:visited 表示已经访问过的连接的样式.
注意：
#divTest a:link,a:visited,a:hover,a:active{ color:red; }//这样写是不对的，下面的会冲掉上面的.
#divTest a:link{ ... } //应该这样写
#divTest a:visited{ ... }//应该这样写，每个上面都要加上#divTest
<div id="divTest">
<a href="#" title="1" id="textid" class="textClass"></a>
</div>
IE7对hour的新特性：所有元素都可以有hour样式
当鼠标移到元素上的时候所见的样式.
#divTest:hover{ background:url("http://www.www.com/img.jpg") no-repeat; }
<div id="divTest">文字....放上去就会现一张图片哦！</div>
