CSS3伪类和伪元素

作为一个CSS3初学不久者来说，很容易混淆单冒号（:）和双冒号（::）的用法，以为两者可以互换着来使用。我自己之前也混淆过他们，因为两者看起来太相像了，就像孪生兄弟。但实际上，他们的区别还是挺大的，最多算得上近房亲戚。

下面我们来开始讲讲单冒号（:）伪类和双冒号（::）伪元素有什么相同和不同点（另外在CSS2中单冒号“:” 也叫做伪对象，具体可看看http://www.mb5u.com/tool/css2/）

 

单冒号（:）早在CSS中已经存在了，相信用惯CSS的码农肯定对:hover伪类并不陌生。另外还有几个比较实用的伪类，例如：

与链接访问有关的 :link(未被点击过的链接)，:visited（链接已被点击访问过）

与键盘输入有关的 :focus(获得键盘输入焦点)

其他像 :lang伪类，:first-child伪类，大家可以自行到W3C官网看看具体用法，在这里我就不赘述了。特别说一下 :first-child伪类，这个伪类很有意思，不得不佩服制定规则的人的洞察力，CSS3出现了类似用法的伪类，为开发者提供了不少方便。

 

其实，伪类和伪元素在CSS中已经存在，而CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。伪类和伪元素都对特定元素进行选择，前者重在对元素状态的描述，而后者更重在对元素本身的描述，这是伪类和伪元素内在的联系和区别。

 

一、CSS3伪类

CSS3伪类又分为两类：状态伪类和结构性伪类。

CSS3状态伪类沿用了我们上面已经提及过的CSS中的:hover ，:link ，:visited 等伪类。另一方面CSS3中大幅增加状态伪类，例如：

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child(index)根据数量选择某个元素的一个特定子元素，括号中填写索引值

:nth-of-type(index)根据类型选择某个元素的一个特定子元素，这个伪类与:nth-child()最大的不同点就在于是按类型来选择子元素的，而不是一股脑的什么子元素都算在内。

给个例子吧：

html:

<div>

<span>这是数字1</span>

<span>这是数字2</span>

<p>这是数字3</p>

<p>这是数字4</p>

<div>

 

css:

div:nth-child（1）{color:blue;}

只会让第一个span元素的颜色变蓝

 

div:nth-of-type(2){color:red;}

则会使第二个span元素和第二个p元素的颜色都变红，原因是把div的子元素分成了两类，一类是span元素，另外一类是p元素。

 

二、CSS3伪元素

CSS中已经有的伪元素 :first-letter ，:first-line ，CSS2中新增的伪元素 :after ，:before

CSS3中将上面的4个伪元素的单冒号变成双冒号，另外还新增了::selection伪元素。

下面来讲讲CSS3中这几个伪元素的一些常见功能

(1)::first-letter和::first-line

:first-letter和:first-line分别对文字的第一个字母和第一行进行选择，这个从英文直接翻译过来是不难理解的，报刊上的第一个文字大写处理就可以用::first-letter。下面重点谈谈另外几个伪元素

（2）::before和::after

::before和::after后面经常跟着content，用于在css渲染中向元素的头部或尾部添加内容。很关键的一点是添加的这些内容不会出现在DOM中，仅仅是作为css渲染层对元素进行修改。所以不要用::before或::after展示有实际意义的内容，而仅仅使用它们显示修饰性内容，例如在文字前面加上icon图标。至于怎么添加和添加有什么前提条件，又可以写一篇文章了。下次有空再来写写这个用法。

 

 

关于兼容性问题：

由于IE对CSS3的支持问题，所以在写代码时也要注意一些小问题。如果只需要兼容firefox、webkit、opera等浏览器，伪元素采用双冒号的写法是没多大问题的，但是如果需要兼容IE浏览器，那么还是用单冒号的写法比较稳妥。