【前言】
本文简单说明下伪类和伪元素的区别。在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; } 看到这里,相信大家已经清楚了为什么一个叫做伪类,一个叫做伪元素 。伪类的效果可以通过添加实际的类来实现 ,伪元素的效果可以通过添加实际的元素来实现 。它们的本质区别就是是否抽象创造了新元素