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

Question

CSS中的伪类和伪元素有什么区别？像a:link或div::after......有关差异的信息似乎很少。

Answer 1

在CSS 3选择建议是关于双方很清楚，但我会尽量尝试显示的差异。

伪类

官方说明

引入伪类概念以允许基于位于文档树之外的信息或者不能使用其他简单选择器表达的信息进行选择。

伪类总是由“冒号”（:）后跟伪类的名称，并且可选地由括号之间的值组成。

在选择器中包含的所有简单选择器序列中允许伪类。在前导类型选择器或通用选择器（可能省略）之后，允许在简单选择器序列中的任何位置使用伪类。伪类名称不区分大小写。一些伪类是互斥的，而其他伪类可以同时应用于同一个元素。在用户与文档交互时元素可以获取或丢失伪类的意义上，伪类可以是动态的。

资源

这是什么意思？

伪类的重要性质在第一句中说明：“伪类概念[...] 许可选择 ”。它使样式表的作者能够根据“位于文档树之外”的信息在元素之间进行区分，例如链接的当前状态（:active，:visited）。这些不会保存在DOM中的任何位置，并且不存在用于访问这些选项的DOM接口。

另一方面，:target可以通过DOM操作访问（您可以使用window.location.hash以便使用JavaScript查找对象），但这 “无法使用其他简单的选择器来表达”。

所以基本上，伪类会将所选元素集合精简为一系列简单选择器中的任何其他简单选择器。请注意，将同时评估一系列简单选择器中的所有简单选择器。有关伪类的完整列表，请检查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;}

伪元素

官方说明

伪元素创建关于文档树的抽象，超出文档语言指定的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者参考这个否则无法访问的信息。伪元素还可以为作者提供引用源文档中不存在的内容的方式（例如，::before和::after伪元素提供对生成的内容的访问）。

伪元素由两个冒号（::）后跟伪元素的名称组成。

本::说明书引入了这种表示法，以便在伪类和伪元素之间建立区别。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的先前单冒号表示法（即：first-line，：first-letter，：before和：after）。对于本规范中引入的新伪元素，不允许这种兼容性。

每个选择器只能出现一个伪元素，如果存在，它必须出现在代表选择器主体的简单选择器序列之后。

注意：此规范的未来版本可能允许每个选择器使用多个伪元素。

资源

这是什么意思？

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

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

我猜最大的区别是“每个选择器只能出现一个伪元素”。该说明可能会有所变化，但截至2012年，我不相信我们将来会看到任何不同的行为（它仍然在CSS4中）。

例

以下示例将使用伪类:lang和伪元素为给定页面上的每个引号添加语言标记::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

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

Answer 2

简短的描述帮助我理解了差异：

• 伪类描述了一种特殊的状态。

• 伪元素匹配虚拟元素。