伪类和伪元素的区别

【前言】

本文简单说明下伪类和伪元素的区别。在CSS1，CSS2中，大家或多或少的用过 :hover，:visited, :before, :after。CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

【主体】

（1）概括：伪类与伪元素的本质区别就是是否抽象创造了新元素；可以同时使用多个伪类，而只能同时使用一个伪元素；

（2）定义：

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

定义代码 收藏代码
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器

（3）详细解析：

       【1】伪类：

        首先来说下伪类，CSS 伪类用于向某些选择器添加特殊的效果。它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到 。例如我们常见的几个超链接伪类

伪类代码 收藏代码
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
小结：由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

      【2】伪元素：

       接下来说下伪元素，简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

       ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动。

Css代码 收藏代码
.clearfix::after{
content: ‘.’;
diaplay:block;
width: 0;
height:0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}//zoom(IE转有属性)可解决ie6,ie7浮动问题

（4）通俗解析

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

Html代码 收藏代码

This is a text

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

Css代码 收藏代码
em:first-child {
color: red;
}

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

Html代码 收藏代码

This is a text

Css代码 收藏代码 em.first-child { color: red; } 可以实现同样的效果

Css代码 收藏代码

This is a text

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

Css代码 收藏代码
p::first-letter {
color: red;
}

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

Html代码 收藏代码

This is a text

Css代码 收藏代码 p span { color: red; } 看到这里，相信大家已经清楚了为什么一个叫做伪类，一个叫做伪元素 。伪类的效果可以通过添加实际的类来实现 ，伪元素的效果可以通过添加实际的元素来实现 。它们的本质区别就是是否抽象创造了新元素