伪类(:)和伪元素(::)的区别

伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，CSS3才对这两个概念做了相对较清晰的概念，下面看看css2和css3中对这两个概念的定义：

伪类 - pseudo classes

CSS2中对伪类的定义：

CSS 伪类用于向某些选择器添加特殊的效果。

单单看定义看不懂在讲什么。
CSS3对伪类的定义：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.

翻译过来就是：

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种：

• 获取不存在与DOM树中的信息。比如标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
• 获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素.

注： target用法和css2、css3中的伪类、伪元素都有哪些可以参考：CSS选择器

伪元素 - Pseudo-elements

CSS2中对伪元素的定义：

CSS 伪元素用于向某些选择器设置特殊效果。

跟伪类的定义差不多，本来CSS2对伪类和伪元素的定义就是完全一样的：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

翻译过来：

CSS引入了伪元素和伪类的概念，以允许基于文档树之外的信息进行格式化。

CSS3中伪元素的定义：

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

A pseudo-element is made of two colons (: followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

Note: A future version of this specification may allow multiple pseudo-elements per selector.

翻译过来：

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

伪元素的由两个冒号::开头，然后是伪元素的名称。

使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。

一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

注：不排除未来会加入同时使用多个伪元素的机制。

简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
总结一下伪类与伪元素的特性及其区别：

• 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
• 伪元素本质上是创建了一个有内容的虚拟容器；
• CSS3中伪类和伪元素的语法不同，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素；
• 可以同时使用多个伪类，却只能同时使用一个伪元素；
• 在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示；

由于IE8及以下的一些浏览器不兼容双冒号（::）表示得方法，所以除了少部分伪元素，其余伪元素既可以使用单冒号(:)，也可以使用双冒号(::)。
引用w3c标准中的话就是：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }，
to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows
for single colon pseudo-elements, for the sake of backwards compatibility， and we would advise that you
stick with this syntax for the time being.

翻译过来：

请注意，编写伪元素的新CSS3方法是使用双冒号，例如a :: after {…}将它们与伪类区分开来。 您可能有时会在CSS中看到这一点。 然而CSS3仍然允许使用单冒号伪元素，为了向后兼容，我们会建议你暂时坚持使用单冒号这种语法。