关于CSS3中的伪类与伪元素的区别及注意事项

这话更抽象，其实意思就是对那些我们不能通过class、id等选择元素的补充

区别

这个区别我们需要一个例子来理解

<p>
 <em>This</em>
 <em>is a text</em></p>

如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单

em:first-child { color: red;}

但是如果不存在伪类我们怎么做呢
这是我们就需要为第一个em标签添加类

<p>
 <em class="first-child">This</em>
 <em>is a text</em></p>

em.first-child { color: red;}

可以实现同样的效果

<p>
 <em>This</em>
 <em>is a text</em></p>

还是这个例子
现在我想让这个段落的第一个字母变红
怎么做呢
这回我们需要使用伪元素

p::first-letter { color: red;}

同样假设伪元素不存在的情况
这时我们只能嵌套span标签来实现

<p>
 <em><span>T</span>his</em>
 <em>is a text</em></p>

p span { color: red;}

看到这里，相信大家已经清楚了为什么一个叫做伪类，一个叫做伪元素
伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
它们的本质区别就是是否抽象创造了新元素

历史

伪类最开始的时候只是用来表示元素的动态（典型的锚伪类link、visited、hover、active）
在CSS2标准中对它进行了扩展让它虽然逻辑存在但不需要在DOM树中标识
伪元素代表了某个元素的子元素，虽然逻辑存在，但不存在于DOM树

虽然它们的概念很容易被我们混淆
但是也不影响我们正常使用

我在CSS3选择器介绍及用法总结中说过
伪类只能使用“：”
而伪元素既可以使用“:”，也可以使用“::”
这里我就解释一下为什么

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

注意

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

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

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

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

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

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

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

总结