CSS的伪类
天下维客，你可以修改的网络知识库
CSS的伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
目录 |
语法
伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：
selector:pseudo-class {property: value}
伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。
类选择符及其他选择符也同样可以和伪类混用：
selector.class:pseudo-class {property: value}
锚的伪类
我们最常用的是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的顺序书写。
伪类和类选择符
将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：
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>
其他伪类
此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。 下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的3倍：
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
这是一个段落，这个段落的首字被放大了。
</p>
我们再定义一个首行样式的例子：
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
这是段落的第一行
这是段落的第二行
这是段落的第三行
</p>
</div>
（上例中段落的第一行为红色，第二、三行为默认颜色）
注意：首字和首行的伪类需要IE5.5以上的版本支持。
伪类(Pseudo-Classes)包括以下常见几个元素：
- link :hover :active :visited
- focus :first-child :first :left
- right :lang
1:link
说明： 设置 a 对象在未被访问前的样式。默认值由浏览器决定。 对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 请参阅 body 对象的 link 属性(特性)和 document 对象的 linkColor 特性。 IE3将:link 伪类的样式表属性作用于 visited 伪类。 语法：Selector: link { sRules } 示例：a:link { font-size: 14pt; text-decoration: underline; color: blue; }
2:hover
说明： 设置对象在其鼠标悬停时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 语法：Selector: hover { sRules } 示例： a:hover { font-size: 14pt; text-decoration: underline; color: blue; } a:hover span{ color:red; }
3:active
说明： 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 并且:active 可以和:link 以及:visited 状态同时发生。 语法：Selector: active { sRules } 示例：a:active { font-size: 14pt; text-decoration: underline; color: blue; }
4:visited
说明： 设置 a 对象在其链接地址已被访问过时的样式。 IE3将:link 伪类的样式表属性作用于:visited 伪类。 默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。 对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 请参阅 body 对象的 vlink 属性(特性)和 document 对象的 vlinkColor 特性。 语法： Selector: visited { sRules } 示例： a:visited { font-size: 14pt; text-decoration: underline; color: blue; }
5:focus
说明： 设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。 语法： Selector: focus { sRules } 示例： a:focus { font-size: 14pt; text-decoration: underline; color: blue; } a:focus img { border: thin solid green }
6:first-child
说明： 设置 E 的第一个子对象的样式。 语法：Selector: first-child { sRules } 示例： p a:first-child { color: green } table td:first-child { width:200px; }
7:first
说明： 设置页面容器第一页使用的样式。仅用于 @page 规则。 语法： Selector: first { sRules } 示例： @page:first { margin: 4cm }
8:left
说明： 设置页面容器位于装订线左边的所有页面使用的样式。仅用于 @page 规则。 语法： Selector: left { sRules } 示例： @page:left { margin: 4cm }
9:right
说明：设置页面容器位于装订线右边的所有页面使用的样式。仅用于 @page 规则。 语法： Selector: right { sRules } 示例： @page:right { margin: 4cm }
10:lang
说明： 设置对象使用特殊语言的内容的样式。 语法：Selector: lang { sRules } 示例： blockquote:lang(fr) { quotes: '?' '?' } /* 使用法语显示由quotes属性指定的法语的嵌套标记 */
