CSS中的伪类和伪元素之间有什么区别？

CSS 3 selector recommendation对两者都很清楚，但我会尽力显示出差异。

伪类

官方描述

Source

这是什么意思？

伪类的重要性质在第一句中说明：“伪类概念[…]允许选择”。它使样式表的作者能够基于“位于文档树外部”的信息(例如链接(：active，：visited)的当前状态)在元素之间不同。这些不会保存在DOM的任何地方，并且没有DOM界面来访问这些选项。

另一方面，：target可以通过DOM操作来访问(你可以使用window.LOCATIOn.hash来查找带有JavaScript的对象)，但是这个“不能使用其他简单的选择器来表达”。

因此，基本上一个伪类将细化所选元素的集合作为sequence of simple selectors中的任何其他simple selector.注意，简单选择器序列中的所有简单选择器将被同时评估。有关伪类的完整列表检查CSS3选择器的建议。

例

以下示例将对所有偶数行的灰色(#ccC)，所有不均匀的行进行着色，这些行不能被5个白色和每隔一行的品红色分割。

table tr:nth-child(2n) td{
   BACkground-color: #ccc;
}

table tr:nth-child(2n+1) td{
   BACkground-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   BACkground-color: #f0f;
}

伪元素

官方描述

Source

这是什么意思？

这里最重要的部分是“伪元素允许作者参考[..]否则不可访问的信息”并且它们“还可以为作者提供一种方式来引用源文档中不存在的内容(例如， :: before和:: after伪元素提供对生成内容的访问)。最大的区别是，他们实际上创建了一个新的虚拟元素，规则甚至伪类选择器可以应用于其上。它们不过滤元素，它们基本上过滤内容(:: first-line，:: first-letter)，并将其包装在一个虚拟容器中，作者可以根据自己的喜好设计。

例如，::第一行伪元素不能用JavaScript重建，因为它在很大程度上取决于当前使用的字体，字体大小，元素宽度，浮动元素(和可能的一天的时间)。嗯，这不是完全正确的：仍然可以计算所有这些值，并提取第一行，但这样做是一个非常繁琐的活动。

我想最大的区别是“每个选择器只出现一个伪元素”。该笔记说，这可能会改变，但截至2012年，我不相信我们在未来看到任何不同的行为(it’s still in CSS4)。

例

以下示例将使用伪类为每个引用添加一个语言标签：lang和pseudo-element :: after：

q:lang(dE)::after{
    content: " (GeRMAN) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(dE)):not(:lang(en))::after{
    content: " (Unrecognized languagE) ";
}

TL; DR

伪类作为选择器序列中的简单选择器，从而对非表示特征上的元素进行分类，伪元素创建新的虚拟元素。

参考文献

W3C

> Selectors Level 3

> 4. Selector syntax
> 6.6 Pseudo-classes
> @L_618_9@

> CSS 2.1 Specification(过期但仍提供信息)

> 5.2 Selector syntax：

> 5.10 Pseudo-elements and pseudo-classes