CSS中的伪类和伪元素之间有什么区别？ [英] What is the difference between a pseudo-class and a pseudo-element in CSS?

问题描述

a：link 或 div :: after ...

有关差异的信息似乎很少。

解决方案

对两者都很清楚，但我会尝试显示差异。

伪类别

官方说明

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

类总是由一个冒号（：）组成，后面跟着伪类的名称，可以用圆括号之间的值。

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

来源

这是什么意思？

伪类在第一句中说明：伪类概念[...] 允许选择。它使得样式表的作者能够基于位于文档树之外的信息来区分元素，例如链接的当前状态（：active code>，：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; 
} 
  

伪元素

< h3>官方说明

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

）构成。

::

符号由当前文档引入以便建立伪类和伪元素之间的区分。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素（即：first-line，：first-letter，：before和：after）的前一个冒号符号。

每个选择器只能出现一个伪元素，如果存在，它必须出现在序列之后

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

来源

这是什么意思？

这里最重要的部分是伪元素允许作者参考[..]否则不可访问的信息，并且他们也可以为作者提供一种方式来引用不存在于源文档（例如， :: before 和 :: after 伪元素可访问生成的内容） / em>。最大的区别是，它们实际上创建了一个新的虚拟元素，规则甚至伪类选择器可以应用于其上。它们不过滤元素，它们基本上过滤内容（ :: first-line ， :: first-letter ）

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

我想最大的区别是每个选择器只出现一个伪元素。注意说，这可能会改变，但截至2012年，我不相信我们在将来看到任何不同的行为（它仍然在CSS4 ）。

示例

使用伪类：lang 和伪元素 :: after ：

  q：lang（de）:: after {
 content：（German） 
} 
 
 q：lang（en）:: after {
 content：（English）; 
} 
 
 q：lang（fr）:: after {
 content：（法语）; 
} 
 
q：not（：lang（fr））：not（：lang（de））：not（：lang（en））:: after {
 content： （无法识别的语言）; 
} 
  





TL; DR

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

h1>

W3C

• 选民三级
  
  
  
  • 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中的伪类和伪元素之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！