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

93

之类的东西a:link或div::after...

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

css  css-selectors  pseudo-class  pseudo-element 
— tybro0103
source
1
@ŠimeVidas发表到什么帖子？链接？
— tybro0103
1
我认为规格非常清楚...
— zzzzBov 2011年
1
@ tybro0103我没有找到任何东西。我想这确实是从来没有被要求在这里...我发现这虽然：stackoverflow.com/questions/7757943/what-is-a-pseudo-element
— 森那维达斯
@zzzzBov我觉得我需要翻译才能理解:)
— tybro0103 2011年
感谢您发布此问题。我不确定为什么在我最近对带有[pseudo-selector]标签的问题进行闪电战之后，为什么没想到要自己发布它？
— BoltClock

Answers:

79

关于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

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

参考文献

W3C

— 泽塔
source
4
我同意DanMan关于SLaks答案的评论，因为伪类并不是真正的“过滤器”，而更多地充当了“描述符”。例如，:not(.someclass):nth-child(even)并不意味着要过滤掉不具有的元素.someclass，而在其余元素中则过滤掉偶数出现的元素。相反，它表示是任何元素都 :not(.someclass) 与 :nth-child(even)它在同一时间母公司。在此答案和此答案中可以找到更深入的解释。
— BoltClock
2
@BoltClock：我相信我最喜欢术语“ characteristic-classifier”，因为这是它们最初在CSS2中的描述：“ Pseudo-classes对元素进行分类而不是其名称”。但是，我仍然没有找到我满意的确切措辞。
— Zeta 2012年
42

伪类过滤现有元素。
a:link意味着所有<a>这有s :link。

伪元素是新的伪元素。
div::after表示<div>s 之后不存在的元素。

::selection是伪元素的另一个示例。
这并不意味着所有元素都被选中。它表示所选内容的范围，可能跨越多个元素的一部分。

— ak
source
12
+1虽然从技术上讲div::after是的子div元素，但在其内容而非元素本身之后出现。
— BoltClock
1
我会说“进一步描述”而不是“过滤器”。
— DanMan
17

简短的说明帮助我了解了不同之处：

  • 伪类描述了一种特殊的状态。
  • 伪元素匹配虚拟元素。
— 杰罗恩
source
10

从Sitepoint文档中：

一个伪类是类似于HTML的一类，但它不是在标记明确指定。一些伪类是动态的-它们是由于用户与文档交互而应用的。- http://reference.sitepoint.com/css/pseudoclasses。这些就像:hover, :active, :visited。

伪元素匹配文档树中未明确存在的虚拟元素。伪元素可以是动态的，因为它们表示的虚拟元素可以更改，例如，当浏览器窗口的宽度改变时。它们还可以表示由CSS规则生成的内容。- http://reference.sitepoint.com/css/pseudoelements。这些就像before, :after, :first-letter。

— motoxer4533
source
6

一个概念性的答案：

  • 伪元素是指文档中包含的内容，但是您还不知道。例如第一个字母。在您只有文字之前。现在，您有了第一个可以定位的字母。这是一个新概念，但始终是文档的一部分。这也包括诸如此类::before; 虽然那里没有实际的内容，但总是存在先于其他事物的概念-现在您要指定它。

  • 伪类是DOM中某物的状态。就像类是与元素关联的标签一样，伪类是通过浏览器或DOM或其​​他任何方式关联的类，通常是对状态变化的响应。当用户访问链接时，该链接可以处于“已访问”状态。您可以想象浏览器将“已访问”类应用于Anchor元素。:visited然后将是您为该伪类选择的方式。

— 杰拉德·奥尼尔
source
6

下面是简单的答案：

当我们需要根据元素的状态应用CSS时，我们使用伪类。如：

  1. 将CSS应用于锚元素（:hover）的悬停
  2. 当将焦点放在html元素（:focus）上时应用CSS 。等等

当我们需要将css应用于元素的特定部分或新插入的content时，我们使用伪元素。如：

  1. 将CSS应用于元素的第一个字母或第一行（::first-letter）
  2. 在元素（::before，::after）的内容之前或之后插入内容

以下是这两个示例：

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>
— Sheo Dayal Singh
source
4

伪类

伪类是选择HTML文档某些部分的方法，原则上不是基于HTML文档树本身及其元素或诸如名称，属性或内容之类的特征，而是基于其他幻像条件（例如语言编码或动态状态）元素

元素的原始伪类定义的动态状态会随着时间的流逝或通过用户干预而进入和退出。CSS2在此概念上进行了扩展，以包括虚拟概念文档组件或文档树的推断部分，例如第一个孩子。伪类的运行就像将幻象类添加到各种元素中一样。

限制：与伪元素不同，伪类可以出现在选择器链中的任何位置。

伪类代码示例：

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

演示上述伪类代码的呈现页面

伪元素

PSEUDO-ELEMENTS用于解决元素的子部分。它们允许您在元素内容的一部分上设置样式，超出文档中指定的样式。换句话说，它们允许定义实际上不在文档元素树中的逻辑元素。逻辑元素允许在CSS选择器中处理隐含的语义结构。

限制：伪元素只能应用于外部和文档级上下文，而不能应用于内联样式。伪元素在规则中可以出现的位置受到限制。它们只能出现在选择器链的末尾（在选择器的主题之后）。它们应位于选择器中找到的任何类或ID名称之后。每个选择器只能指定一个伪元素。为了在单个元素结构上处理多个伪元素，必须创建多个样式选择器/声明语句。

伪元素可用于常见的印刷效果，例如初始大写和大写大写。它们还可以解决不在源文档中生成的内容（带有“ before”和“ after”）。下面是一些带有属性和值的伪元素的样式表示例。

/ *以下规则选择标题1的首字母，并将字体设置为2em（草书），背景为绿色。第一个字母为块级元素选择第一个呈现的字母/字符。* /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

资料来源：链接

— 总结
source
0

简言之，从伪类的MDN：

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，:hover 当用户将鼠标悬停在按钮上时，可用于应用样式。

div：hover {
  背景颜色：＃F89B4D;
}

而且，根据MDN上的伪元素：

CSS 伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。例如， ::first-line可用于设置段落第一行的样式。

/ *每个<p>元素的第一行。* /
p ::第一行{
 颜色：蓝色；
 文本转换：大写；
}
— 戴维
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.