当你学习CSS时，要学的第一个东西就是选择符（selector）。显然，选择符是CSS中最基础的部分，但是却很少有开发者能将他们物尽其用。当你使用type、ID、class等选择符来完成你的作品时，你可能还不知道除此之外还有很多很多关于它的东西要学。
熟练掌握CSS2.1中所有可用的选择符可以使我们的HTML文档更加简洁明了。可以使你最少量地使用class属性，尽量避免多余的div和span标签出现等。怎么样，听起来还不错吧？
    那么为什么并不是所有的选择符都被得到广泛地应用呢？其中一个很重要的原因就是包括Internet Exlorer 6.0在内的所有IE版本对CSS2.1支持的缺陷造成的。然而几乎所有的现代浏览器都在最大程度上支持CSS2.1中规定的选择符。在我们开始一切工作之前我们必须意识到这些差别。
    令人欣慰的是，在IE7.0对选择符的支持得到了很大程度的提高。得知这个消息后，在未来的设计中你就可以放心大胆地使用它们了，因此也有必要全面了解和掌握所有规定的选择符了（本文发表时IE7.0还在开发中dudo注）。
由于CSS2.1中规定的选择符有很多，因此在一篇文章中想把他们解释的很清楚可能会需要很长很长的篇幅来写，所以我将从下面三个部分来分开讲解，以期这些知识简单易接受。
1、本文第一部分，讲解包括通配符、类型选择符、id、class在内的基本的选择符；
2、第二部分主要讲选择器（combinators）、联合选择符（grouping）、分组和属性选择符
3、第三部分主要讲解伪类和伪元素（pseudo-classes and pseudo-elements）
好，我们开始第一部分的讲解。
选择符基础
首先是一个最基本的知识点：CSS选择符是与文档树结构中元素匹配的一种模式。当模式中的匹配结果返回true时，CSS中声明的样式才会应用到相匹配的元素中去。以下面这个简单的CSS语句为例来说：

view plaincopy to clipboardprint?

1. p { color:#f00; } 

选择符CSS语句中大括号“{”前面的部分。这里的选择符就是p，它将匹配文档中所有的p元素并把p元素内的文本设置为红色。这个例子很基础。
选择符概述
好，看过上面简单的例子之后，我们介绍一下其它一些选择符，现在开始已经慢慢地深入了。在开始介绍之前，还是选看一下CSS2.1所有选择符的结构吧。
CSS2.1选择符结构

view plaincopy to clipboardprint?

2. 选择符类型        模式        说明 
3. 通配选择符        *        匹配所有元素 
4. 类型选择符        E        匹配所有E元素 
5. 类（Class）        .info        匹配所有属性class值等于info的元素 
6. ID        #footer        匹配所有属性id值等于footer的元素 
7. 后代选择符        E F        匹配所有为E后代的F元素 
8. 子选择符        E > F        匹配所有为E子元素F 
9. 邻近选择符        E + F        匹配所有E的兄弟元素F 
10. 属性选择符        E[att]        匹配所有拥有att属性的E元素，与属性值无关 
11. 属性选择符        E[att=val]        匹配所有拥有att属性且值为val的E元素 
12. 属性选择符        E[att~=val]    匹配所有拥有att属性且val为属性值中一个完整单词的E元素 
13. 属性选择符        E[att|=val]        匹配拥有拥有att属性且val是其值的开始 
14. :first-child伪类    E:first-child        匹配所有处于其父元素中的第一个节点E元素 
15. 链接伪类        E:link        匹配所有未访问过的链接 
16.         E:visited        匹配所有已经访问过的链接 
17. 动态伪类        E:active        匹配所有激活状态中的链接 
18.         E:hover        匹配鼠标经过时的链接 
19.         E:focus        匹配处于焦点状态的链接 
20. :language伪类    E:lang(c)        匹配所以语言为c的E元素 
21. :first-line伪类    E:first-line        匹配元素E中内容的第一行 
22. :first-letter伪类    E:first-letter    匹配E元素中的首字母 
23. :before 和 :after    E:before        匹配在E元素前（后）插入的内容 
24. 伪类        E:after 

下面我将在后面的两部分中更加详细地解释这些选择符，请继续往下看。上表中用到了一些术语，下面我简单解释一下：
后代：
在文档树结构中一个元素的子元素，子元素的子元素，直到这个元素的最底层为止。
祖先：
在文档树结构中一个元素的父元素，父元素的父元素，甚至更上一层的元素
子元素
是指在文档树结构中一个元素的直接后代，他们之间再也没有任何其他元素出现
父元素
是指在文档树结构中一个元素的直接祖先，他们之间再也没有其他任何元素出现
兄弟元素
是指和当前元素拥有同一父元素的元素
简单选择符 和 混合选择符
选择符中有两个基本的类型：简单选择符和混合选择符。
简单选择符由一个类型选择符或者通配符加上零个或者多个属性选择符，ID选择符，伪类选择符构成。下面的语句就是一个简单选择符的例子：

view plaincopy to clipboardprint?

1. p.info { background:#ff0 } 

混合选择符由两个或者多个简单选择符通过连接符组成。下面是一个非常简单的混合选择符。

view plaincopy to clipboardprint?

1. div p { font-weight:bold; } 

上面这条规则将会应用到所有div内的元素p上
选择符有时可能会使用伪类。在混合选择符中，伪类只能出现在最后一个简单选择符后面。
通配选择符
通配选择符用一个星号“*”来表示，它匹配文档中的所有元素。在样式表中一般很少见，但是它有时候会配合class和ID选择符一起使用。如果简单选择符中不仅仅含有通配选择符，那么“*”可以省略不写。
.myclass就等同于 *.myclass
#myid 等同于 *#myid
通配选择符的一个广泛应用就是用来把所有元素的margin和padding值设为0：

view plaincopy to clipboardprint?

1. * { margin:0; padding:0; } 

这就是有时所说的全局空白重设
类型选择符
类型选择符匹配所有指定的元素。下面这个示例将匹配文档中所有段落元素p，并设定字段大小为2em：

view plaincopy to clipboardprint?

1. p {font-size:2em;} 

类选择符
类选择符用点号“.”来表示，根元素的class属性值来指定元素。下面这个示例将把所有属性class为info的p元素背景设为红色：

view plaincopy to clipboardprint?

1. .info { background:#f00; } 

你可以给一个元素设定多个类名，不过每个类名中间要用空格隔开。类选择符就可以指向拥有多个类名的元素了。下面的例子中将来定义类名既有info又有error的p元素：

view plaincopy to clipboardprint?

1. p.info.error { color:#900; font-weight:bold; } 

注意：多类选择符IE6.0以前的版本并不支持，IE7支持。
元素类型可以不用写。下面这条语句也同样会应用到所有class为info的p元素中去：

view plaincopy to clipboardprint?

1. .info { background:#ff0; } 

ID选择符
ID选择符用“#”来表示，根据元素的id属性值来匹配元素。下面这个规则将应用到id为info的元素中去，而不管他的类型是什么：

view plaincopy to clipboardprint?

1. #info { background:#ff0; } 

如果同时也指定了元素类型，那么规则将只有应用到指定的类型上：

view plaincopy to clipboardprint?

1. p#info { background:#ff0; } 

有一点一定要记住，ID选择符优先级高于class类选择符，并且在同一文档中id必须唯一。因此，ID选择符制定的样式最终只会应用到文档中的一个元素上。

本文是关于CSS2.1选择符系列文章的第二部分。第一部分主要是讲关于类型选择符、类class选择符、id选择符、通配选择符和简单选择符的基础知识。
而在本部分中，我们主要讲一下选择符的高级应用，这不仅仅包括已经在主流浏览器中得到广泛支持的那些选择符。现在，浏览器对选择符的支持越来越完善，因此完全有必要拿出点时间来了解一下本文所介绍的所有选择符。
选择器
选择器用于将组成混合选择符的多个简单选择符分隔开来。CSS2.1中定义的选择器包括空格（任何数目的tab制表位、空格、具有空格性质的其他字符），大于号“>”和加号“+”。在现在的章节中我们将一一介绍这些选择器的使用。
后代选择符
后代选择符由两个或者多个简单选择符通过空格分隔而组成。他匹配第一个简单选择符对应元素的所有后代元素。例如，下面这条规则将会应用到是div后代的p元素上去：

view plaincopy to clipboardprint?

1. div p { color:#f00; } 

任何形式的简单选择符都可以是后代选择符的组成部分。下面的例子中CSS规则将会应用到id是myid的div中的、li元素下的、类名为info的p元素中：

view plaincopy to clipboardprint?

1. div#myid li p.info { color:#f00; } 

后代选择符可以使我们在不用指定id或者class的情况下选取目标元素，这有助于使文档中的标记更加简洁。假设我们有一个如下结构的导航菜单：

view plaincopy to clipboardprint?

2. <ul id="nav">
3. <li><a href="#">Link 1</a></li>
4. <li><a href="#">Link 2</a></li>
5. <li><a href="#">Link 3</a></li>
6. </ul>

要选取导航栏中的列表元素和超级链接，我们可以使用下面的CSS规则：

view plaincopy to clipboardprint?

2. #nav li { display:inline; } 
3. #nav a { font-weight:bold; } 

上面的规则不会应用到文档中的所有列表元素和链接中去。和一一给它们指定一个class相比，使用后代选择符会使你的文档清洁不少。
子选择符
子选择符用于择取指定元素的直接后代。子选择符由两个或者多个选择符通过大于号“>”分隔而成。父元素在“>”的左侧，在选择器“>”的两侧允许有空白存在。
下面的规则将会就用到所有div的子元素strong中去：

view plaincopy to clipboardprint?

1. div > strong { color:#f00; } 

只有是div直接后代的strong元素才是这条规则的目标元素。如果文档中在div和strong元素中间有其他元素的话，这条规则就是无效的。下面的例子中只有“Text one”样式受上面规则的影响：

view plaincopy to clipboardprint?

2. <div>
3. <strong>Text one</strong>
4. <p><strong>Text two</strong></p>
5. </div>

相邻的兄弟选择符
相邻的兄弟选择符由两个或者多个简单选择符通过加号“+”分隔而组成。加号两侧允许有空白存在。它匹配第一个元素的下一个兄弟元素，这两个元素必须具有相同的父元素，并且第一个元素和第二个元素在其前与其紧密相邻：

view plaincopy to clipboardprint?

1. p + p { color:#f00 } 

如果把上面这条规则应用到下面的例子中，那么“Paragraph two”样式受影响：

view plaincopy to clipboardprint?

2. <div>
3. <p>Paragraph one</p>
4. <p>Paragraph two</p>
5. </div>

分组
之所以在这里讲分组，是因为我发现在学习分组混合选择符的时候经常会有人出错。
如果利用几个不同的选择符对不同元素应用相同的样式时，就可以使用逗号“,”把它们分组而不用为每个选择符重复同样的规则了。这里最容易出现的错误就是选择符的不完整。假设我们有下面这么一段代码：

view plaincopy to clipboardprint?

2. <div id="news">
3. <h3>News</h3>
4. <ul>
5. <li>Item 1</li>
6. <li>Item 2</li>
7. </ul>
8. </div>

假设我们要给只有在id为news的div下的三级标题和列表元素应用相同的规则，那么下面这种写法就是错误的

view plaincopy to clipboardprint?

2. div#news h3, ul { 
3. margin:0 2em; 
4. } 

它会影响到div#news下的h3和ul元素，但是问题就在于它同样会影响到文档中所有ul元素，而不仅仅是div#news下的ul元素。
下面这种写法才是正确的分组选择符的写法：

view plaincopy to clipboardprint?

2. div#news h3, 
3. div#news ul { 
4. margin:0, 2em; 
5. } 

因此，在使用分组选择符时，一定要记住选择符书写完整。
属性选择符
属性选择符根据属性名称或者属性值来匹配元素。属性选择符有四种匹配模式：
[att]
    匹配所有拥有att属性的元素，与属性值无关
[att=val]
    匹配所有拥有att属性且属性值为val的元素
[att=~val]
    匹配所有拥有att属性的元素且val是其属性值由空白分隔开的一个完整单词。在这各情况下val中间没有空白。
[att|=val]
    匹配所有拥有att属性的元素，并且att的属性值是由连字符组成，val处于连字符的开始。它主要用于通过lang属性指定特定语言的情况中，例如：“en”、“en-us”，“en-gb”等等。
下面是一些例子。
匹配有title属性的p元素而不管它的值是多少：

view plaincopy to clipboardprint?

1. p[title] { color:red; } 

下面的例子将匹配class属性等于error的div元素

view plaincopy to clipboardprint?

1. div[class=error] { color:#f00; } 

要匹配headers属性中含有“col1”的td元素则可以使用下面的规则：

view plaincopy to clipboardprint?

1. td[headers~=col1] {color:#f00} 

最后，下面的这条规则就匹配lang属性值中连字符前半部分以“eu”开始的p元素：

view plaincopy to clipboardprint?

1. p[lang|=en] { color:#f00' } 

在同一个选择符中多个属性选择符可以同时使用。这样我们就可以用多个不同的属性值来区分相同的元素了。下面这个例子将会匹配到属性class值为quote且有cite属性（不管值是多少）的blockquote元素：

view plaincopy to clipboardprint?

1. blocquote[class=quote][cite] { color:#f00; } 

这部分我们将着重研究伪类和伪元素。和第二部分中介绍的高级选择符一样，伪类和伪元素并没有得到所有主流浏览器的完全支持，因此一定要留意在缺乏浏览器支持时可能发生的情况。你一定不想让你网页的内容在不支持这些选择符的浏览器中变得无法让人阅读。
伪类和伪元素
伪类和伪元素通过文档中并没有声明的信息来选取元素的。例如，并没有元素代表段落中的第一行或者元素内文本的第一个字母。
伪类
伪类通过元素的特征而不是元素的名称、属性、内容来匹配元素的。
:FIRST-CHILD
它匹配作为父元素中第一个字元素的元素。假如你想为文章中的第一段设定一个特殊的样式，再假设文章被包含在一个class为article的div中，那么下面这段代码将会匹配每篇文章中的第一个p元素：

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

1. a:link 
2.     :link 

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

view plaincopy to clipboardprint?

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

第一第规则应用于当元素获得焦点时，第二第规则应用于被激活时的同一个元素。
:lang
语言伪类可以用于格式化内容指定了特定语言（人类可读语言，非标记语言）的元素。下面这条规则应于指定了瑞典语的引用元素：

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

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

注意：伪元素:first-line中可能使用的属性是有限制的，具体参看《:first-line伪元素》中的说明。
:FIRST-LETTER
这个伪元素指向的是块级元素，列表、表格内框（table-cell）、表头（table-caption）、inline-block元素中的第一个字母或者数字。
下面的规则将应用到class为preamble元素中的第一个字符：

view plaincopy to clipboardprint?

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

和:first-line一样，:first-letter的中可以使用的属性也同样有一定的限制。请参照[url=http://www.w3.org/TR/CSS21/selector.html#first-letter]《:first-letter伪元素》。
:BEFORE和:AFTER
更多关于CSS特征的讨论都是围绕这两个伪元素展开的，:before和:after伪元素可能用于在指定元素前或后插入扩展内容。
下面是一个使用:before的例子（引自文章《用高级CSS功能制作边框》）

view plaincopy to clipboardprint?

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.     } 

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

view plaincopy to clipboardprint?

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

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

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

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