伪元素和伪类的区别

最新推荐文章于 2025-09-12 14:20:04 发布
原创 最新推荐文章于 2025-09-12 14:20:04 发布 · 6.9k 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

伪元素和伪类的根据区别就是：前者是创建出了一个新元素，而后者是一个已存在但你不能直接看到的元素。

伪元素

伪元素本身不存在在DOM文档中，它需要人为的去创建它。且就算你创建了伪元素，它也只是逻辑上存在，实际上也并不存在DOM文档中，也就是说你无法使用JS去获取改变它。
在这里插入图片描述

伪类

伪类它存在于DOM文档中，但如果你没有特别的去声明它，你就看不到它。
在这里插入图片描述

总结

  1. 伪元素是创建了一个新元素，而伪类本身就存在只不过不用特别声明
  2. 伪元素使用:或者::声明(前者是css2的声明方式，后者是css3)，而伪类只能使用： (建议在H5中伪元素统一用:: 以便区分伪元素和伪类)
  3. 伪元素只能同时使用一个，伪类可以同时使用多个
前端CSS：伪元素和伪类的区别和作用
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-27 843
通过本文的深入探讨，我们了解到伪元素和伪类在前端开发中的重要性。在前端开发中，CSS 伪元素和伪类为开发者提供了强大的工具，用来增强页面的表现力和交互性。本文将深入探讨伪元素和伪类的概念、作用以及具体的使用方法，并通过多个实例帮助读者理解它们的不同之处及其在实际项目中的应用。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）学习路线(点击解锁）
CSS 伪类和伪元素
weixin_44152104的博客
08-12 1416
伪类是选择器的一种，它用于选择处于特定状态的元素。比如当它们是这一类型的第一个元素时（:first-child），或者是当鼠标指针悬浮在元素上面的时候（:hover）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。伪类是以开头为冒号的关键字：:first-child。
关于css的伪类和伪元素
weixin_30352191的博客
03-24 251
现在才发现自己一直没有分清楚css的伪类和伪元素啊，so，总结一下。 CSS伪类用于向某些选择器添加特殊的效果。 CSS伪元素用于将特殊的效果添加到某些选择器。 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他css无法描述的东西。 伪类种类 伪元素种类 区别 这里用伪类:first-child和伪元素:...
伪元素和伪类的区别总结
x1037490413的博客
09-11 8426
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 伪元素选择符 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪类选择符 再看看W3C中对于二者应用的描述： 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 其实根本意思就是就是对那些不能通过class、id等选择元素的补充 举个栗子： 如果我
CSS 伪类与伪元素：一篇搞懂区别、用法与实战场景
最新发布
qq_51145696的博客
09-12 1440
CSS伪类与伪元素详解：核心区别在于伪类选择元素状态（如:hover选择悬停状态），而伪元素创建虚拟元素（如::before添加装饰内容）。
伪类与伪元素的区别
qq_45272642的博客
10-16 2166
一、什么是伪类和伪元素 提到“伪”字，你想到了什么？“假的”，“汪精卫伪政府”，“不存在的”······ 伪类：用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。我的理解就是：本身不存在，只有在特定的情况（滑动、点击）下才会被触发的状态，可以用css去修饰这个状态下的对象。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为
伪类和伪元素的区别是什么？
imagine_tion的博客
10-07 1万+
一、两者的定义 1.伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。 2.伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些**文本实际不在文档树中**。 二、区别 1.伪类是通过在**元素选择器上加入伪类**改变元素状态。 2.伪元素通过**对元素的操
伪类和伪元素区别
newbie_ling的博客
08-19 1198
伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。下面我们再从定义上感受一下。 1.伪类 css2中给的定义 css伪类用于某些选择器添加特殊的效果 css3中给的定义：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器...
CSS伪类和伪元素的区别详解
12-13
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 复制代码代码如下: p>i:first-child {color: red}<p> <i>first</i> <i>second</i></p>  //伪类 :first-child 添加样式到第一个子元素如果
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
伪元素与伪类
Yous的博客
07-03 7967
伪类比较好理解。以上完全看不懂~先看一遍伪元素演示： body中： css部分： 效果图： 同理； 其它还包括：伪元素 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。伪元素 用来设置指定元素中内容第一行的样式，与 类似，伪元素 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。伪元素 用来设置对象被选中时的样
伪类和伪元素的区别
青颜的天空的博客
03-16 988
1.什么是伪类？ 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。 伪类就是开头为冒号的关键字： :pseudo-class-name **解读：**伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条
CSS3伪类与伪元素的区别及注意事项
热门推荐
尐轩web前端网络日志
12-10 1万+
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概
伪类和伪元素的区别？
weixin_47450807的博客
04-05 967
一、简单区分 伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。也就是说，当用户悬停指定的元素时，我们可以通过:hover来描述这个元素的状态。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 有时你会发现伪元素使用了两个冒号::而不是一个冒号:。这是CSS3的一部分，并尝试区分伪
什么是伪类和伪元素？伪类和伪元素的区别的区别详解
u012174809的专栏
05-08 2421
1.伪类 用来添加一些选择器的特殊效果。 2.伪元素 伪元素是用来添加一些选择器的特殊效果。 3.区别 伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值