CSS 伪类与伪元素的区别；为什么first-child是伪类，而first-line与first-letter就是伪元素呢？

伪类与伪元素的区别可参考伪类与伪元素的区别

这篇主要进行细致区分，加深理解，为什么first-child是伪类，而first-line与first-letter就是伪元素呢？

<div>
    <p>this is the first one!</p>
    <p>this is the second one!</p>
</div>

上面是一段HTML文本代码，first-child用于选中第一个元素，例如：

div:first-child {
  color: red;
}

我们通过以上样式设置选中了div元素的第一个子元素，也就是
<p>this is the first one!</p>，并将其设为红色，在这个过程中并没有新元素的创建产生，所以first-child是伪类。

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

我们又通过以上样式设置选中了p标签的第一个字母，并把它加粗，但需要注意，我们想选择的只是 t 这个字母（已有段落元素的一部分文本，但并不是元素，因为没有开始和闭合标签），这个字母在文档树中是没有独立的元素的，我们想为它单独设置样式，就需要单独创建一个新的虚拟元素出来，也就是<p>t</p>，然后再为它设置样式（加粗）。在这个过程中，创建了新元素，所以first-line与first-letter就是伪元素。