伪元素和伪类的区别

伪元素是一个添加给选择器的关键字，可以根据这个关键字来个性化被选择元素的部分样式。（A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s)）

伪类指的是给选择器添加关键字，可以根据这个关键字来个性化被选择元素不同状态下的样式。（A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)）

<div class="pseudo_class">hover</div>
<div class="pseudo_element">show red color</div>

.pseudo_class:hover {
  color: green
}
.pseudo_element::first-letter {
  font-size: 130%;
  color: red
}

demo演示