细说CSS样式选择符（三）

英文原文：http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/
中文原文：http://www.dudo.org/article.asp?id=195
这本文的第三部分，也是最后一部分。在第一部分中我们介绍了类型选择符、类选择符、id选择符、通配选择符和简单选择符的基础知识。第二部分中我们介绍了选择器、混合选择符、分组和属性选择符等。

这部分我们将着重研究伪类和伪元素。和第二部分中介绍的高级选择符一样，伪类和伪元素并没有得到所有主流浏览器的完全支持，因此一定要留意在缺乏浏览器支持时可能发生的情况。你一定不想让你网页的内容在不支持这些选择符的浏览器中变得无法让人阅读。

伪类和伪元素
伪类和伪元素通过文档中并没有声明的信息来选取元素的。例如，并没有元素代表段落中的第一行或者元素内文本的第一个字母。

伪类
伪类通过元素的特征而不是元素的名称、属性、内容来匹配元素的。
:FIRST-CHILD
它匹配作为父元素中第一个字元素的元素。假如你想为文章中的第一段设定一个特殊的样式，再假设文章被包含在一个class为article的div中，那么下面这段代码将会匹配每篇文章中的第一个p元素：

1. div.article p:first-child {
2. font-style:italic;
3. }

div.article p:first-child {
    font-style:italic;
}

要匹配所有元素中的第一个p元素，可以采用下面的规则：

1. p:first-child {
2. font-style:italic;
3. }

p:first-child {
    font-style:italic;
    }

:LINK 和 :VISITED
linke伪类作用于访问过和未访问过的链接。这两种状态是相互排斥的：也就是说一个链接不可能同时既是访问过的又是未访问过的。
这些伪类只能应用于根据文档采用的语言类型定义的超级链接上。对于HTML来说，就是拥有href属性的元素。由于它们不会在其它元素上生效，因为下面的选择符写法是一样的：

1. a:link
2. :link

a:link
    :link

:HOVER，:ACTIVE和:FOCUS
动态伪类可以根据用户的选定动作的控制选定元素的表现等式。
:hover应用于当用户鼠标指针指向一个元素但并没有激活它时。最常见的就是用鼠标把指针移动到元素上方时。
:active应用于当元素被用户激活时。对于鼠标用户来说就是当鼠标被保持按下时状态，直到你松开前。
:focus应用于当元素获得焦点时，例如，用键盘输入信息时。

一个元素可以同时使用几个伪类。例如，下面的例子中一个元素同时有focus和hover两个状态：

1. input[type=text]:focus{
2. color:#000;
3. background:#ffe;
4. }
5. input[type=text]:focus:hover{
6. background:#fff;
7. }

input[type=text]:focus{
    color:#000;
    background:#ffe;
    }
    input[type=text]:focus:hover{
    background:#fff;
    }

第一第规则应用于当元素获得焦点时，第二第规则应用于被激活时的同一个元素。

:lang
语言伪类可以用于格式化内容指定了特定语言（人类可读语言，非标记语言）的元素。下面这条规则应于指定了瑞典语的引用元素：

1. q:lang(sv) { quotes:"\201D" "\201D" "\2019" "\2019"; }

q:lang(sv) { quotes:"\201D" "\201D" "\2019" "\2019"; }

文档或元素中语言类型通常是通过HTML中的lang属性或者XHTML中xml:lang属性定义的。

伪元素
伪元素允许作者指定并修改文档树结构中没有声明的节点的样式。
:FIRST-LINE
:first-line伪元素作用于段落中文本的第一行。它只能用于块级元素、inline-block、表头（table-caption）或者表格内框（table-cell）。
显然，第一行的长度取决于很多因素，比如字体的大小、包含文本的元素的宽度等。
下面这条规则将会应用到段落中文本的第一行：

1. p:first-line {
2. font-weight:bold;
3. color:#600;
4. }

p:first-line {
    font-weight:bold;
    color:#600;
    }

注意：伪元素:first-line中可能使用的属性是有限制的，具体参看《:first-line伪元素》中的说明。

:FIRST-LETTER
这个伪元素指向的是块级元素，列表、表格内框（table-cell）、表头（table-caption）、inline-block元素中的第一个字母或者数字。

下面的规则将应用到class为preamble元素中的第一个字符：

1. .preamble:first-letter {
2. font-size:1.5ed;
3. font-weight:bold;
4. }

.preamble:first-letter {
    font-size:1.5ed;
    font-weight:bold;
    }

和:first-line一样，:first-letter的中可以使用的属性也同样有一定的限制。请参照[url=http://www.w3.org/TR/CSS21/selector.html#first-letter]《:first-letter伪元素》。

:BEFORE和:AFTER
更多关于CSS特征的讨论都是围绕这两个伪元素展开的，:before和:after伪元素可能用于在指定元素前或后插入扩展内容。
下面是一个使用:before的例子（引自文章《用高级CSS功能制作边框》）

1. .cbb:before{
2. content:"";
3. display:block;
4. height:17px;
5. width:18px;
6. background:url(top.png) no-repeat 0 0;
7. margin:0 0 0 -18px;
8. }

.cbb:before{
    content:"";
    display:block;
    height:17px;
    width:18px;
    background:url(top.png) no-repeat 0 0;
    margin:0 0 0 -18px;
    }

使用:after在链接的文本后面插入一个URL：

1. a:link:after {
2. content:" (" attr(href) ") ";
3. }

a:link:after {
    content:" (" attr(href) ") ";
    }

Internet Explorer中的问题
在你开始使用所学的关于CSS选择符的知识前，到目前为止包括6.0在内Internet Explorer对CSS2.1选择符的支持并不完整。下面是IE不支持或者支持上存在问题的地方：

子选择符
相邻兄弟选择符
属性选择符
多类选择符
:first-childe伪类
语言伪类
:before和:after伪类
伪类:hover只在a元素中起作用
不支持伪类:focus。对于a元素获得焦点时使用:active

幸运的是，在Internet Explorer 7中CSS2.1中规定的选择符都得到了支持。

马上开始使用
本文到此全部结束。现在你已经学会CSS2.1中所有的选择符了。仔细地运用他们，使你的文档保持简洁，增加可用性和要访问性。一定要牢记考虑老式浏览器和不支持高级选择器中浏览器的种种状况。