CSS 伪类与伪元素

定义
CSS 伪类 — 用于向某些选择器添加特殊的效果。
CSS 伪元素 — 用于向某些选择器设置特殊效果。

标准有这么一句话翻译过来是这样的

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

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

区别

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

效果:

This is a text

伪类使用

em:first-child {
    color: red;
}

得出效果： This is a text
【This会变红】

但是如果不存在伪类我们怎么做来实现同样的效果？
这就需要为第一个em标签添加类

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

//css
    em.first-child {
        color: red;
    }

伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
它们的本质区别就是是否抽象创造了新元素

注意

伪类就像真正的类一样，可以叠加使用，没有数量上限，只要不是互斥的
比如这样

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

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

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

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

在计算权重的时候
伪类与类优先级相同
伪元素与标签优先级相同

总结

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