伪元素和伪类的区别和作用

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此称为“伪元素”。例如：

p::before {
  content: '后面伪元素'
}
p::after {
  content: '前面伪元素'  
}
// 设置第一行样式
p::first-line {
  background: red  
}
// 设置第一个字母样式
p::first-letter {
  font-size: 30px  
}

• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {
  color: red  
}
p:first-child {
　　color: #ccc
}

总结：伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。