What is the difference between a pseudo-class and a pseudo-element in CSS?(CSS中的伪类和伪元素有什么区别?)

问题描述

像 a:link 或 div::after...

关于差异的信息似乎很少.

CSS 3 选择器推荐 对两者都很清楚，但无论如何我都会尝试展示它们的区别.

伪类

官方说明

<块引用>

引入伪类概念是为了允许基于位于文档树之外或无法使用其他简单选择器表达的信息进行选择.

一个伪类总是由一个冒号"(:) 后跟伪类的名称和可选的括号之间的值组成.

在选择器中包含的所有简单选择器序列中都允许使用伪类.在简单选择器序列中的任何位置都允许使用伪类，位于前导类型选择器或通用选择器(可能被省略)之后.伪类名不区分大小写.一些伪类是互斥的，而另一些可以同时应用于同一个元素.伪类可能是动态的，从某种意义上说，当用户与文档交互时，元素可能会获取或丢失伪类.

来源

这是什么意思?

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

另一方面，:target 可以通过 DOM 操作访问(您可以使用 window.location.hash 来通过 JavaScript 查找对象)，但是这个不能用其他简单的选择器来表达".

所以基本上一个伪类将像任何其他简单选择器 在 简单选择器序列.请注意，一系列简单选择器中的所有简单选择器将同时被评估.有关伪类的完整列表，请查看 CSS3 选择器推荐.

示例

以下示例将所有偶数行着色为灰色 (#ccc)，将所有不能被 5 整除的非偶数行着色为白色，每隔一行着色为洋红色.

table tr:nth-child(2n) td{背景颜色:#ccc；}表 tr:nth-child(2n+1) td{背景颜色:#fff；}表 tr:nth-child(2n+1):nth-child(5n) td{背景颜色:#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:<为给定页面上的每个引用添加语言标签/p>

q:lang(de)::after{内容:(德语)"；}q:lang(en)::after{内容:(英文)"；}q:lang(fr)::after{内容:(法语)"；}q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{内容:(无法识别的语言)"；}

TL;DR

伪类充当一系列选择器中的简单选择器，从而根据非呈现特征对元素进行分类，伪元素创建新的虚拟元素.

参考文献

W3C

• 选择器级别 3
  • 4.选择器语法
  • 6.6 伪类
  • 7.伪元素
• CSS 2.1 规范(过时但仍能提供信息)
  • 5.2 选择器语法:<块引用>

    简单选择器可以是类型选择器或通用选择器，后跟零个或多个属性选择器、ID 选择器或伪类，顺序不限.如果所有组件都匹配，则简单选择器匹配.

  • 5.10 伪元素和伪类李>

Things like a:link or div::after...

Information on the difference seems scarce.

The CSS 3 selector recommendation is pretty clear about both, but I'll try to show the differences anyway.

Pseudo-classes

Official description

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

What does this mean?

The important nature of pseudo-classes is stated in the very first sentence: "the pseudo-class concept [...] permit selection". It enables the author of an stylesheet to differ between elements based on information that "lies outside of the document tree", for example the current status of a link (:active,:visited). Those aren't saved anywhere in the DOM, and there exists no DOM interface to access these options.

On the other hand, :target could be accessed via DOM manipulation (you could use window.location.hash in order to find the object with JavaScript), but this "cannot be expressed using the other simple selectors".

So basically a pseudo-class will refine the set of selected elements as any other simple selector in a sequence of simple selectors. Note that all simple selectors in a sequence of simple selectors will be evaluated at the same time. For a complete list of pseudo-class check the CSS3 selector recommendation.

Example

The following example will color all even rows gray (#ccc), all uneven rows which aren't dividable by 5 white and every other row magenta.

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

Official description

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

What does this mean?

The most important part here is that "pseudo-elements allow authors to refer to [..] otherwise inaccessible information" and that they "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).". The biggest difference is that they actually create a new virtual element on which rules and even pseudo-class selectors can be applied to. They don't filter elements, they basically filter content (::first-line,::first-letter) and wrap it in a virtual container, which the author can style however he want (well, almost).

For example the ::first-line pseudo-element cannot be reconstructed with JavaScript, as it heavily depends on the current used font, the fonts size, the elements width, floating elements (and probably the time of the day). Well, that's not entirely true: one could still calculate all those values and extract the first line, however doing so is a very cumbersome activity.

I guess the biggest difference is that "only one pseudo-element may appear per selector". The note says that this could be subject to change, but as of 2012 I don't believe we see any different behavior in the future (it's still in CSS4).

Example

The following example will add a language-tag to every quote on a given page using the pseudo-class :lang and the 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

Pseudo-classes act as simple selectors in a sequence of selectors and thereby classify elements on non-presentational characteristics, pseudo-elements create new virtual elements.

References

W3C

• Selectors Level 3
  • 4. Selector syntax
  • 6.6 Pseudo-classes
  • 7. Pseudo-elements
• CSS 2.1 Specification (outdated but still informative)
  • 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

这篇关于CSS中的伪类和伪元素有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！