什么是伪类(pseudo class)？

pseudo这个单词来源于希腊语的音译，意思是虚构的，假的，或者伪的意思。因此这里不难理解为什么我们称之为伪类。

和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。

因此大家需要注意一下几点：

它们不是真正的元素，对于很多情况下，大家不用用它展示实际意义的内容，尽量用它显示修饰性内容或者设计性内容，例如，图标
要知道有些相关的开发工具，例如著名的开发工具firebug根本就不显示任何的伪类生成内容，如果你使用的话，你知道后果的！你将陷入盲目的debug中。当然你使用Chrome可以看到样式，但是在DOM看不到元素。

什么时候使用伪类(pseudo class)？

如果你需要创建一些修饰类图标，或者设计UI的时候，使用伪类是相当方便的，大家可能还记得那篇分享一个纯CSS开发的气泡式提示框文章吧，一个非常准确的使用场景。

如果我们有一个链接元素，如下：

GBIN1

如果我们定义了相关的CSS，如下：

#gbin1{
  font-size: 12px
  background: #202020
}

我们使用:before生成当前元素前面的伪元素样式和内容，这里我们需要使用content属性，注意我们可以使用文字类，或者图片，如下：

....