伪类

官方描述

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.

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;
}

伪元素

官方描述

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.

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
> 7. Pseudo-elements

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

> 5.2 Selector syntax：

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors,ID selectors,or pseudo-classes,in any order. The simple selector matches if all of its components match.

> 5.10 Pseudo-elements and pseudo-classes