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

Question

a:link或div::after ...

之类的内容

差异的信息似乎很少。

Answer 1

CSS 3 selector recommendation对两者都非常清楚，但无论如何我都会尝试显示差异。

伪类

官方说明

  

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

     

伪类总是由一个＆＃34;冒号＆＃34; （:）后跟伪类的名称，也可以是括号之间的值。

     

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

Source

这是什么意思？

伪类的重要性质在第一句中说明：＆＃34;伪类概念[...] 允许选择＆＃34; 。它使样式表的作者能够根据＆＃34;位于文档树之外的信息＆＃34; 来区分不同的元素，例如链接的当前状态（:active :visited）。这些都没有保存在DOM中的任何位置，并且没有DOM接口来访问这些选项。

另一方面，可以通过DOM操作访问:target（您可以使用window.location.hash以使用JavaScript查找对象），但此＆＃34;无法表达使用其他简单的选择器＆＃34; 。

因此，基本上伪类会将所选元素集优化为simple selector中的任何其他sequence of simple selectors。请注意，将同时评估一系列简单选择器中的所有简单选择器。有关伪类的完整列表，请检查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）。本规范中引入的新伪元素不允许这种兼容性。

     

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

     

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

Source

这是什么意思？

这里最重要的部分是＆＃34;伪元素允许作者引用[..]否则无法访问的信息＆＃34; 并且他们＆＃34;还可以为作者提供引用源文档中不存在的内容的方式（例如，::before和::after伪元素可以访问生成的内容。 ＆＃34 ;.最大的区别在于它们实际上创建了一个新的虚拟元素，可以在其上应用规则甚至伪类选择器。他们没有过滤元素，他们基本上过滤内容（::first-line，::first-letter）并将其包装在虚拟容器中，作者可以根据自己的需要设置样式（好吧，几乎）。

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

我猜最大的区别是＆＃34;每个选择器只能出现一个伪元素＆＃34; 。该说明可能会有所变化，但截至2012年，我不相信我们将来会看到任何不同的行为（it's still in 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

• Selectors Level 3
  • 4. Selector syntax
  • 6.6 Pseudo-classes
  • 7. Pseudo-elements
• CSS 2.1 Specification（过时但仍然提供信息）
  • 5.2 Selector syntax：

      

    一个简单的选择器是一个类型选择器或通用选择器，后面紧跟零个或多个属性选择器，ID选择器或伪类，任何顺序。如果所有组件都匹配，则简单选择器匹配。

  • 5.10 Pseudo-elements and pseudo-classes

Answer 2

伪类过滤现有元素 a:link表示<a>的所有:link。

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

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

Answer 3

简短的描述帮助我理解了差异：

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

Answer 4

从Sitepoint文档：

  

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

     

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

Answer 5

概念性答案：

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

• 伪类是DOM中某些东西的状态。就像类是与元素关联的标记一样，伪类是由浏览器或DOM或其​​他任何东西关联的类，通常作为对状态变化的响应。当用户访问链接时 - 该链接可以处理“已访问”的状态。你可以想象浏览器应用这个类“访问过”了。到Anchor元素。 :visited将是您为该伪类选择的方式。

Answer 6

<强>伪类

伪类是选择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名称之后。每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素，必须创建多个样式选择器/声明语句。

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

/ *以下规则选择标题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;
}

来源：Link

Answer 7

以下是简单的答案：

当我们需要根据元素的状态应用css时，我们使用pseudo-class。如：

1. 在悬停锚元素（:hover）
时应用css
2. 在关注html元素（:focus）时应用css。等

当我们需要将css应用于元素的特定部分或新插入的内容时，我们会使用pseudo-element。如：

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>

Answer 8

简而言之，来自MDN的Pseudo-classes：

  

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

div:hover {
  background-color: #F89B4D;
}

并且，来自MDN上的Pseudo-elements：

  

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

/* The first line of every <p> element. */
p::first-line {
 color: blue;
 text-transform: uppercase;
}