CSS 属性 - 伪类和伪元素的区别

前言

虽然自己也是做前端的，可是对于真正的前端开发者来说，自己也只不过是一个只会复制黏贴的菜鸟而已。今天由于工作的原因，需要用到伪类和伪元素。以前自以为是的认为，伪类和伪元素既然都有“伪”，那概念肯定是一样的，不就是给选择器添加一些样式效果吗。现在想想真是可笑至极。参考了一下前辈们的经验，再这里总结一下。

伪类

——向某些选择器添加特殊的效果。

当已有元素处于某种状态时，为其添加对应的样式。而元素处于何种状态是根据用户的行为而动态变化的。（如：当鼠标悬浮于元素上时，可以用伪类:hover为此状态添加样式；而当此状态改变时，它就会失去这个样式）。虽然它和普通的css类似，都是为已有元素添加样式，但是它只有处于抽象的状态下，才能为元素添加样式，所以称其为伪类。

伪元素

——将特殊的效果添加到某些选择器。
简单的可以理解为：用于创建一些不在文档树中的元素，并为其添加样式。例如，我们可以用::before 在一个元素前添加文本，并为此文本添加样式。虽然界面上用户可以看到这些文本，但是这些文本在文档树中是实际不存在的。

伪类和伪元素的区别

首先是写法上的区别，CSS3规范中早已明确规定，伪类使用单冒号(:)来表示，伪元素用双冒号(::)来表示。（例如，::before, ::after等伪元素。:hover, :link 等伪类)
虽然CSS3标准要求伪元素用(::)，但由于兼容性的问题，所以现在大部分还是统一的单冒号。

其实两个的根本区别在于：它们是否创建了新的元素（抽象元素，实际在文档树中并不存在）。

在此我们举例说明：
先看伪元素 :first-letter

<p>love me,love my dog</p> 

如果我们需要给首字母添加样式，在不用伪元素的情况下，我们需要嵌套一层，然后在添加类名：

p span.first-letter{    color:red;}<p><span class="first-letter">l</span>ove me,love my dog</p>

如果不创建<span>元素，我们可以通过设置p::first-letter来为其添加样式。这时，虽然看起来好像是创建了一个<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。

p:first-letter{    color:red;}<p>love me,love my dog</p> 

反观伪类 :first-child

<ul>    <li>我是第一个元素</li>    <li>我是第二个元素</li></ul>

如果我们想给第一个<li>添加样式，如何不用伪类，通常想到的方法是为此<li>添加一个类,并为该类定义样式：

li.first-item{    color:red;}<ul>    <li class="first-item">我是第一个元素</li>    <li>我是第二个元素</li></ul>

如果我们不用添加类的方法，可以通过:first-child伪类来为其添加样式（:first-child将样式添加到元素的第一个子元素）

li:first-item{    color:red;}<ul>    <li>我是第一个元素</li>    <li>我是第二个元素</li></ul>

由此可见，伪类是为现有元素添加一个实际的类来达到效果，而伪元素则需要添加一个文档树外的新元素加以标识才能到达效果。这也是为什么使用“create”来解释伪元素，“classify”来解释伪类的原因。