伪类 伪元素

伪类：虽不是类 但起到了类的作用

p>i:first-child {color: red}

<p><i>first</i><i>second</i></p> //伪类 :first-child 添加样式到第一个子元素

.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>

伪元素：

:p:first-letter {color: red}<p>i am stephen lee.</p> //伪元素 :first-letter 添加样式到第一个字母

.first-letter {color: red}
<p><span class='first-letter'>i</span> am stephen lee.</p>


伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到