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

事情像a:link或div::after …

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

Answer 1

CSS3select器的build议对两者都很清楚，但是我会尽量展示差异。

伪类

官方描述

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

一个伪类总是由一个“冒号”（：）组成，后面跟着伪类的名字，并且可以用一个括号之间的值来表示。

在select器中包含的简单select器的所有序列中允许伪类。 在引导typesselect器或通用select器（可能省略）之后，伪类可以在简单select器序列的任何地方被允许。 伪类名称不区分大小写。 一些伪类是互斥的，而另一些则可以同时应用到同一个元素。 伪类可以是dynamic的，即元素可以在用户与文档交互时获取或丢失伪类。

资源

这是什么意思？

伪类的重要性在第一句话中说： “伪类概念许可select ” 。 它使样式表的作者根据“位于文档树之外”的信息 （例如链接的当前状态（ :active ， :visited ））在元素之间有所不同。 那些没有保存在DOM中的任何地方，并且不存在用于访问这些选项的DOM接口。

另一方面，可以通过DOM操作访问:target （可以使用window.location.hash来查找带有JavaScript的对象），但是这个“不能用其他简单的select器来表示” 。

所以基本上一个伪类将会把一组选定的元素细化为一系列简单select器中的其他简单select 器 。 请注意，一系列简单select器中的所有简单select器都将同时进行评估。 有关伪类的完整列表，请查看CSS3select器的build议。

例

以下示例将为所有偶数行灰色（ #ccc ），所有#ccc不均匀行由5个白色和每隔一行的洋红色#ccc 。

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

伪元素

官方描述

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

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

这个::符号是由当前文件引入的，以便在伪类和伪元素之间build立区分。 为了与现有样式表兼容，用户代理还必须接受前一个用于CSS级别1和2（即：first-line，：first-letter，：before和：after）中引入的伪元素的冒号记号。 本规范中引入的新伪元素不允许这种兼容性。

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

注：本规范的将来版本可能允许每个select器有多个伪元素。

资源

这是什么意思？

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

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

我猜最大的区别是“每个select器只能出现一个伪元素” 。 该说明说，这可能会有所改变，但截至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

伪类作为select器序列中的简单select器，从而将元素分类为非表示特征，伪元素创build新的虚拟元素。

参考

W3C

• select器3级
  • 4.select器语法
  • 6.6伪类
  • 7.伪元素
• CSS 2.1规范 （过时，但仍提供信息）
  • 5.2select器语法 ：
    

    一个简单的select器可以是一个typesselect器或通用select器，可以以任意顺序紧跟着零个或多个属性select器，IDselect器或伪类。 如果所有组件匹配，则简单select器匹配。

  • 5.10伪元素和伪类

Answer 2

伪类对现有元素进行过滤。
a:link意味着所有:link 。

伪元素是一个新的假元素。
div::after表示<div> div::after不存在的元素。

::selection是伪元素的另一个例子。
这并不意味着所选的所有元素; 这意味着所选内容的范围可能跨越多个元素的一部分。

Answer 3

简短的描述，帮助我了解不同之处：

• 伪类描述了一个特殊的状态。
• 伪元素匹配虚拟元素。

Answer 4

从Sitepoint文档：

伪类与HTML中的类相似，但在标记中没有明确指定。 一些伪类是dynamic的 – 它们是作为用户与文档交互的结果而被应用的。 – http://reference.sitepoint.com/css/pseudoclasses 。 这些会是这样的:hover, :active, :visited 。

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

Answer 5

伪类

伪类是selectHTML文档的某些部分的方式，原则上不基于HTML文档树本身及其元素或名称，属性或内容等特征，而是基于其他幻象条件，如语言编码或dynamic状态的元素。

最初的伪类定义了随时间进入和退出的元素的dynamic状态，或通过用户干预。 CSS2扩展了这个概念，以包含虚拟概念文档组件或文档树的推断部分，例如第一个孩子。 伪类操作就好像幻影类被添加到各种元素。

限制：与伪元素不同，伪类可以出现在select器链的任何地方。

伪类代码示例：

 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 */ } 

演示上述伪类代码的页面

伪元素

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

限制：伪元素只能应用于外部和文档级别的上下文 – 而不能用于内联样式。 伪元素在规则中出现的位置受到限制。 它们可能只出现在select器链的末尾（在select器的主题之后）。 他们应该在select器中find任何课程或ID名称之后。 每个select器只能指定一个伪元素。 要在单个元素结构上寻址多个伪元素，必须创build多个样式select器/声明语句。

伪元素可用于常见的印刷效果，如初始上限和下降上限。 它们还可以处理不在源文档中的生成内容（使用“之前”和“之后”）。添加了属性和值的一些伪元素的示例样式表如下。

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

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

来源： 链接

Answer 6

概念答案：

• 一个伪元素指的是文档的一部分，但你只是不知道它。 例如第一个字母。 之前你只有文字。 现在你有一个你可以定位的第一个字母。 这是一个新的概念，但始终是文件的一部分。 这也包括::before东西; 虽然这里没有实际的内容，但在别的东西之前的概念总是存在 – 现在你正在指定它。

• 伪类是DOM中某种东西的状态。 就像一个类是与一个元素相关联的标签一样，伪类是一个被浏览器或DOM或其​​他类所关联的类，通常作为对状态变化的响应。 当用户访问一个链接 – 该链接可以采取“访问”的状态。 你可以想象浏览器将“visited”类应用到Anchor元素。 :visited然后将是如何select该伪类。

Answer 7

以下是简单的答案：

当我们需要基于元素的状态来应用css时，我们使用伪类。

如：

1. 在hover的元素上应用css
2. 将焦点放在html元素上时应用css。 等等

当我们需要基于元素的特定部分来应用css时，我们使用伪元素。

如：

1. 应用元素的CSS，第一个字母或行
2. 在元素的内容之前或之后插入内容

下面是两个例子：

  <html> <head> <style> p::first-letter { //pseudo-element color: #ff0000; } a:hover { color: red; //pseudo-class } </style> </head> <body> <a href="#" >This is a link</a> <p>This is First Line.</p> </body> </html> 

Answer 8

简而言之，从MDN上的伪类 ：

一个CSS 伪类是一个关键字添加到select器，指定所选元素的特殊状态。 例如，当用户hover在button上时， :hover可用于应用样式。

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

而且，从MDN上的伪元素 ：

一个CSS 伪元素是一个关键字添加到select器，让你风格选定元素的特定部分。 例如，可以使用::first-line来设置段落的第一行。

 / *每个<p>元素的第一行。  * /
 p :: first-line {
 颜色：蓝色;
 文字转换：大写;
 }