本篇随笔将紧接着上一篇随笔内容，继续讨论CSS高级选择器。值得一提的是：虽然很多选择器是CSS3.0的新特性，但由于主流浏览器的支持性比较好，我并未做出严格区分和说明。

　　④通用样式（或者说通用选择器）。

　　顾名思义，通用样式是所有元素（当然，这里指标签）都能够使用的样式，而实际上它默认是被所有元素引用的。请看下面的例子：

1  2   3    4    7   8  9  10   测试文字11   
测试文字
12  13 

　　意思就是：通用选择器里的样式是默认被所有标签引用。凡是有利就有弊，那么我们一般是用作微调。比如我们可能会在cs文件或网页内嵌样式中添加下列代码：

1 *{2   margin:0;3   padding:0;}

　　内容一般就是这种。

　　⑤伪类。

　　1).锚伪类（以下内容大部分摘自W3CSchool）。

　　锚伪类是CSS1中就存在的伪类，主要有以下四个可设置样式：

1 a:link {
   color: #FF0000}     /* 普通情况下的链接样式 */2 a:visited {
   color: #00FF00}  /* 被访问过的链接样式 */3 a:hover {
   color: #FF00FF}   /* 鼠标悬停上时链接样式 */4 a:active {
   color: #0000FF}   /* 被选中时链接样式 */

　　使用过的朋友们都知道，这种样式是非常灵活的。除了颜色，还有下划线、鼠标形状等格式样式，您一定能使用以上伪类样式做出非常绚丽的效果。

　　以下是W3CSchool对于锚伪类的几点提示：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类名称对大小写不敏感。

　　很简单，和其他样式一样，某些样式设置需要遵循一定的顺序规则。

　　2):first-child 伪类。

　　W3CSchool的原话为：“:first-child 伪类对另一个元素的第一个子元素进行匹配”。

　　这句话是什么意思呢？估计大家会误解，因为我开始也误解了。请看下面的例子：

1  2   3    4    7   8  9  10   
     
      11     
      
12     测试113     
14   
     
15   
     
      16     
      
17     测试218     
19   
     
20  21 

　　大家是不是认为ul下的第一个li就会默认引用我们设置的样式？实际上并非如此，:first-child是指作为第一个子元素而被赋予的样式。比如上面的例子，第一个ul作为body的第一个子元素而引用了我们设置的样式，第二个就没有。又如下面的例子：

1  2   3    4    7   8  9  10   
     
      11     
      
12     测试113     
14   
     
15   
     
      16     
      
       17         
       
18         测试219         
20     
      
21   
     
22  23 

　　IE9没有效果……上面的例子证明了该伪类也可以和子选择器配合使用，当然，该伪类也可以在其他地方使用，比如特定匹配。请看下面的例子（摘自W3CSchool）。

在这个例子中，选择器将对 p 元素中的第一个子元素为 em 的元素进行匹配 - 并且将 p 元素中的第一个 em 元素设置为粗体：

1    2    8   9 10  11   
I am a strong man.
12  13 

　　有时候:first-child被写在p的后面，实际上是一样的，大家注意一下，另外IE9似乎不支持该伪类样式。

　　3):lang伪类。

　　首先我们要知道lang是元素的属性，意思是表示语言。比如“zh”、“zh-cn”、“us”、“us-en”。

　　使用方式如下：

1  2      3          4         11 12     13 14     15         
文字段落中的引用的文字文字
16     17 

　　当然，既然语言（lang）是一种属性，我们何不试试属性选择器呢？

1  2      3          4         11 12     13 14     15         
文字段落中的引用的文字文字
16     17 

　　效果和上面的一样，当然IE9没戏。

　　那么我们是不是可以使用得更加高级一些呢？比如下面这样：

1  2      3          4          8  9     10 11     12         
     
      13             
      
文字段落中的引用的文字文字
14         
     
15     16 

　　这个例子要复杂一些，大家可以在火狐浏览器里观看效果。我先将网页语言设置为“zh”，默认地，它的子元素会继承它的属性，整个页面呈现出red背景色，而页面内有一个div有自己的语言，会呈现出设置的背景色，这个例子顺便复习了属性选择器。

　　:first-child伪类和:lang伪类是CSS2的新特性。

　　值得注意的是：在CSS2中，还新引入了:focus。大家可以自己看一下。

　　⑥伪元素。

　　1):first-line 伪元素。

　　"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式。

　　我不做过多示例，不过有几点需要注意：

：first-line 伪元素仅能被用于块级元素。

下面的属性可以被应用到 first-line 伪元素。

• font 属性
• color 属性
• background 属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

　　2):first-letter 伪元素。

　　同上。

　　3):before和:after。

　　用于在某个元素之前或之后插入某些内容。如W3CSchool的举例：

1 h1:after2 {3 content: url(beep.wav)4 }

1 h1:before2 {3 content: url(beep.wav)4 }

　　以上例子将会在标题之前或之后播放音频。

　　:fisrt-line和:first-letter是CSS1就有，:before和:after是CSS2的新特性。

　　在CSS3中很多新的伪类被添加，也有很多选择器被添加新特性。他们是以下途图中所示：

　　

　　我们在下一篇在进行探讨。

　　值得说明的是：我的IE9可能真的有问题……

　　2012-05-20 22:07:45