CSS中伪类与伪元素的概念是很容易混淆的
今天就来谈谈伪类与伪元素之间的区别

---

定义

首先先来看看伪类与伪元素的定义
w3c中对于它们是这么解释的

• 伪类：用于向某些选择器添加特殊的效果
• 伪元素：用于将特殊的效果添加到某些选择器

CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化

CSS3中的标准是伪类使用单冒号“:”
而伪元素使用双冒号“::”（避免混淆）
但是在此之前无论是伪类还是伪元素都使用单冒号“:”
所以为了保证兼容伪元素两种使用方法都是可以的
但是低版本IE有双冒号兼容问题
所以以前编写样式的人们对于伪类和伪元素就干脆统统使用单冒号
导致这种混淆一直延续下来

注意

在使用伪类和伪元素的时候
有一点要特别注意
伪类就像真正的类一样，可以叠加使用
没有数量上限，只要不是互斥的
比如这样

em:first-child:hover {
    color: red;
}

这是完全可以的
但注意，这里是“与”的关系
也就是说既要满足“first-child”第一个子元素
又要满足“hover”光标悬浮

---

伪元素就要严格的多
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
（这里有同学误会了，所以我作出了修改）
像下面的样式是无法生效的

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;
}

p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/
    color: red;
}

---

再多说一句关于它们的优先级
在计算权重的时候
伪类与类优先级相同
伪元素与标签优先级相同

总结

• 伪类与伪元素都是用于向选择器加特殊效果
• 伪类与伪元素的本质区别就是是否抽象创造了新元素
• 伪类只要不是互斥可以叠加使用
• 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
• 伪类与伪元素优先级分别与类、标签优先级相同
  https://blog.csdn.net/q1056843325/article/details/53560588