伪元素和伪类的区别

W3C中伪类和伪元素的官方定义文档：

In CSS 2, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4 (see [HTML4]), no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it.

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

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. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).

Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. 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. The exceptions are ':first-child', which can be deduced from the document tree, and ':lang()', which can be deduced from the document tree in some cases.

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

Pseudo-element and pseudo-class names are case-insensitive.

Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. In case of conflicting rules, the normal cascading order determines the outcome.

翻译：

在CSS2中，一般附加到元素上的样式是基于它在文档树中的位置。在不少状况下，这种简单的模型就够用了。可是因为文档树的结构，一些常见的发布方案可能并不能实现咱们想要的效果。例如，在HTML4(参见[HTML4])中，没有元素引用[1]段落的第一行，所以没有简单的CSS选择器能够引用它。

/*[1]这里的引用指元素标签包含这些内容。*/

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

伪元素建立抽象概念，此抽象概念和文档树有关，但超出了文档语言指定的概念。譬如，文档语言不提供访问元素的第一个字母或第一行内容的机制。CSS伪元素容许样式表设计者来引用此其它方式没法访问的信息。伪元素还能够为样式表设计者提供一种方式来分配样式给源文档中不存在的内容(例如，:before和:after伪元素提供对生成内容的访问)。

伪类按照除了名称、属性或内容之外的特征对元素分类;原则上来讲，不能从文档树中推断这些特征。伪类能够是动态的，从这个方面来讲，当用户与文档交互时，一个元素能够得到或丢失伪类。‘:first-child’和‘:lang()’是例外，‘:first-child’，它能够从文档树中推断出来，‘:lang()’在某些状况下也能够从文档树中推断出来。

伪元素和伪类都不能出如今文档源或文档树中。

选择器的任何地方都容许使用伪类，而伪元素只能附加在最后一个简单选择器以后。

伪元素和伪类名称不区分大小写。

一些伪类是互斥的，而其余伪类能够同时应用于同一个元素。若是规则冲突，正常的级联顺序决定告终果。

伪元素(Pseudo-element)

伪元素是一个附加至选择器末的关键词，容许你对被选择元素的特定部分修改样式。

语法：

selector::pseudo-element {

property: value;

}

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器以后。

注意：按照规范，应该使用双冒号(::)而不是单个冒号(:)，以便区分伪类和伪元素。可是，因为旧版本的 W3C 规范并未对此进行特别区分，所以目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

伪元素示例：

/* 改变段落首行文字的样式 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

 

伪元素本质上是建立了一个虚拟容器(元素)。

伪类(Pseudo-class)

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

语法

selector:pseudo-class {

property: value;

}

相似于普通的类，你能够在一个选择器中同时一块儿写多个伪类。

参考文献：

伪类和伪元素相关定义和使用的W3C官方文档：https://drafts.csswg.org/css2/selector.html#x22