【前言】
本文简单说明下伪类和伪元素的区别。在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”配合使用,见过最多的就是清除浮动。
.clearfix::after{ content: '.'; diaplay:block; width: 0; height:0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}//zoom(IE转有属性)可解决ie6,ie7浮动问题
(4)通俗解析
这个区别我们需要一个例子来理解
<p> <em>This</em> <em>is a text</em> </p>
如果我们想要第一个em标签字体颜色变红怎么做呢 ???使用我们熟悉的伪类很简单
em:first-child { color: red; }
但是如果不存在伪类我们怎么做呢???这是我们就需要为第一个em标签添加类
<p> <em class="first-child">This</em> <em>is a text</em> </p>
em.first-child { color: red; }
可以实现同样的效果
<p> <em>This</em> <em>is a text</em> </p>
还是这个例子 。现在我想让这个段落的第一个字母变红 ,怎么做呢 ???
这回我们需要使用伪元素
p::first-letter { color: red; }
同样假设伪元素不存在的情况 ,这时我们只能嵌套span标签来实现
<p> <em><span>T</span>his</em> <em>is a text</em> </p>
p span { color: red; }
看到这里,相信大家已经清楚了为什么一个叫做伪类,一个叫做伪元素 。伪类的效果可以通过添加实际的类来实现 ,伪元素的效果可以通过添加实际的元素来实现 。它们的本质区别就是是否抽象创造了新元素
常用伪元素
:first-letter:向文本的第一个字母添加特殊样式。 :first-line: 向文本的首行添加特殊样式。 :before:在元素之前添加内容。 :after:在元素之后添加内容。 ::placeholder:匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效。 ::selection:CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分) ::backdrop(处于试验阶段):用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式
.
相关推荐
https://mp.csdn.net/postedit/88689169 伪类选择元素基于的是当前元素处于的状态,或者说是元素当前所具有的...伪元素是对元素中特定内容进行操作的,它所操作的层次比伪类更深一层,也因此它的动态性比伪类要低很多。
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
CSS按钮与伪元素
css-div的border属性使用&伪元素伪类
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 复制代码代码如下: p>i:first-child {color: red}<p> <i>first</i> <i>second</i></p> //伪类 :first-child 添加样式到第一个子元素如果
CSS伪类集合集合了CSS2中所有的伪类
位类和伪元素和选择器
伪类伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态...
用伪元素:after实现分割线和气泡
CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :after选择器 :before选择器 描述 :before伪元素选择器用于在被选元素的内容前面插入内容。 语法格式 E:before{ content:文字/url...
无论是伪类还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准。
主要讲的是css3中新增加的选择器,伪元素选择器。
伪元素实现tooltip,nav导航栏的炫酷效果以及计数器
元素的伪类1
NULL 博文链接:https://onestopweb.iteye.com/blog/2262507
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
HTML5选择器和伪元素----学习分享
一款使用css3 transitions和伪元素制作的4种鼠标经过hover动画效果,4种鼠标经过hover动画效果分别是:滴水效果,圆心放大,旋转放大和飞翔的独眼怪。