CSS伪类与伪元素

 

定义：

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

一句话解释：CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化（意思就是对那些我们不能通过class、id等选择元素的补充）

　　伪类的效果可以通过添加实际的类来实现
　　伪元素的效果可以通过添加实际的元素来实现

例如：

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

em.first-child {
    color: red;
}
伪类：

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

em.first-child {
    color: red;
}
伪元素：

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

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

伪类就像真正的类一样，可以叠加使用

但是伪元素在一个选择器中只能出现一次，并且只能出现在末尾

总结

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