伪元素和伪类的区别总结

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪元素选择符

伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪类选择符

再看看W3C中对于二者应用的描述：

伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
其实根本意思就是就是对那些不能通过class、id等选择元素的补充

举个栗子：

如果我们想要第一个p标签字体颜色变红怎么做呢使用伪类就会很简单：

但是如果不用伪类我们怎么做呢？这时我们就需要为第一个p标签添加一个类class

可以实现同样的效果,但是需要多写一个类

如果使用伪元素该如何实现上述操作呢？

如果不用伪元素我们怎么做呢？

可以看出二者区别了，
伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
所以它们的本质区别就是是否抽象创造了新元素

注意：
伪类只能使用“：”
而伪元素既可以使用“:”，也可以使用“::”
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

相关问题
:after/::after和:before/::before的异同
相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的
不同点

:before/:after是Css2的写法，::before/::after是Css3的写法
:before/:after 的兼容性要比::before/::after好，
不过在H5开发中建议使用::before/::after比较好
注意：

伪对象要配合content属性一起使用
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪对象的特效通常要使用:hover伪类样式来激活
eg:当鼠标移在span上时，span前插入”duang”

伪元素和伪类的区别总结相关推荐

什么是伪类和伪元素？伪类和伪元素的区别的区别详解
1.伪类用来添加一些选择器的特殊效果. 2.伪元素伪元素是用来添加一些选择器的特殊效果. 3.区别伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一 ...
浅析什么是伪类和伪元素？伪类和伪元素的区别解析
一.理解什么是伪类?什么是伪元素? 1.伪类种类伪类作用对象是整个元素 a:link{color:#111} a:hover{color:#222}div:first-child{color:#33 ...
巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
css中什么是伪元素,CSS伪元素是什么？
什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...
一句话让你明白伪元素和伪类的区别
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到. 下面就这句话给出例子伪类 :first-child <div><p>我是一个段 ...

伪元素和伪类的区别总结

伪元素和伪类的区别总结相关推荐

最新文章

热门文章