前面在介绍选择器时，提到了伪类和伪元素，并列举了 CSS 里的伪类列表。

在讲链接时介绍的链接的四个状态，就是伪类。

伪，就是假的意思，也可以理解为不存在。

那伪类和伪元素，都有一个“伪”字，它们有什么区别呢？

伪类

伪类，就是假的类，不存在的类。那指的是在哪里不存在呢？

这里要引入一个概念 DOM，也就是 HTML 文档结构树，具体理解不我们写的 HTML 标签组成的文档。

举例来说，链接标签的状态，它并不真实存在在 DOM 树里。所以它的状态被定义成了伪类。

另外，伪类是为了弥补选择器的不足，例如，要获取第一个子元素，无法使用常规的 CSS 选择器获取，但能通过:fist-child 获取。

伪元素

伪元素，直接理解为不存在的元素，也就是文档无法创建出来的元素。

比如说，文档没有办法提供描述元素第一个字母或第一行字母的机制，但伪元素::first-letter、::first-line 可以做到。

同时伪元素还可以创建不存在的内容，如::before、::after。

伪类和伪元素的区别

通过上述的描述，可以看出：

• 伪类弥补了 CSS 选择器的不足，用来更方便地选择元素。

• 伪元素是创建了一个虚拟容器(元素)，这样可以在其中添加内容或样式。

伪类和伪元素示例

伪类 :first-child

ul li:first-child {   color: red; } 

<ul>   <li>第一个项</li>   <li>第二个项</li> </ul> 

通过:first-child，就可以直接选择到 ul 元素下的第一个 li 元素。

如果这时候我们把 html 代码换个顺序

<ul>   <li>第二个项</li>   <li>第一个项</li> </ul> 

看到它就是按照文档顺序选择了第一个 li。

伪元素 ::first-letter

如果我们想要把某段文字的第一个字母特别显示，在不用::first-letter 的情况下，如何实现呢？

.first-letter {   font-size: 20px;   color: red;   font-weight: bold; } 

定义一个.first-letter 的类

<p>   <span class="first-letter">马</span>上就要到国庆节假期啦，大家开心不开心！ </p> 

然后在使用的时候，把第一个字使用 span 元素单独放置，并在 span 元素上应用了这个刚才定义的样式。

看到效果如上。

这样做是不是有点麻烦，如果我有 100 个段落，我要手工为每一个段落的第一个字都加上 span 元素吗？

这里就引入了伪元素::frist-letter。

p::first-letter {   font-size: 20px;   color: red;   font-weight: bold; } 

不再定义.first-letter 类，而是直接使用伪元素选择第一个字。

<p>马上就要到国庆节假期啦，大家开心不开心！</p> 

在 HTML 里也不再需要使用 span 元素。

这样的效果和上面截图是一样的。

这样是不是理解了，这里的::first-letter 实际上就是虚拟了前面我们实现的 span 元素。

结合前面的示例，可以参考选择器里提到的伪类和伪元素，进行更多更简单的 CSS 代码写法吧。

总结

• 🍑 伪元素是文档无法创建出来的元素。

• 🍑 伪类弥补了 CSS 选择器的不足，用来更方便地选择元素。

• 🍑 伪元素是创建了一个虚拟容器(元素)，这样可以在其中添加内容或样式。