伪类与伪元素的由来及区别

引用：

1、https://zhuanlan.zhihu.com/p/46909886

2、

一、什么是伪类和伪元素

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

二、伪类与伪元素的区别

这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：

<ul>
    <li>我是第一个</li>
    <li>我是第二个</li></ul>

如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：

<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li></ul>

li.first-item {color: orange}

如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。

li:first-child {color: orange}

下面是另一个简单的html段落片段：

<p>Hello World, and wish you have a good day!</p>

如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：

<p><span class="first">H</span>ello World, and wish you have a good day!</p>

.first {font-size: 5em;}

如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。

<p>Hello World, and wish you have a good day!</p>

p:first-letter {font-size: 5em;}

从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

伪类与伪元素的由来及区别

原文：https://www.cnblogs.com/oaoa/p/14387260.html