CSS3中伪类与伪元素的区别

最新推荐文章于 2022-05-12 20:57:01 发布
最新推荐文章于 2022-05-12 20:57:01 发布
阅读量387 收藏
点赞数 1
分类专栏： 前端学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45902611/article/details/109825399
版权

​ 在CSS2.1中对伪类和伪元素的区别比较模糊。CSS3中对着两个概念做了相对较清晰的解释，并且在语法上野做了很明显的区分。

​ CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后为伪元素的名称。

​ 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。

​ 伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

​ 常用的伪元素有：

​ ::selection

​ ::first-line / first-letter

​ ::before / after

青黄皂白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS中的伪类与伪元素及二者间的区别
09-24
1. 表示方式：伪类只有一个冒号(:)，伪元素有两个冒号(::)（在CSS2.1中，伪元素也使用一个冒号，但在CSS3中进行了区分）。 2. 存在形式：伪类描述元素在特定状态下的表现，而伪元素则是在元素内部创建的虚拟内容，...
CSS中的伪类和伪元素（详细）
热门推荐
m0_52083530的博客
01-21 1万+
这篇想要跟大家分享的是css中的伪类和伪元素，有任何问题可以私聊我或者评论哦！ 首先，我们先来想一下，为什么要引入伪类跟伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪类，伪元素？ 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:h
CSS3伪类和伪元素
qq_36412715的博客
08-12 668
1.伪类 CSS3给出的定义是： 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。 通过上面的概念我们知道了伪类的功能有两种： 1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。 2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取...
css伪类与伪元素的区别
丑小鸭变黑天鹅的博客
03-29 5067
css伪类与伪元素的区别1、伪类(pseudo-classes)2、伪元素(Pseudo-elements)3、伪类与伪元素的区别 1、伪类(pseudo-classes) 其核心就是用来选择DOM树之外的信息不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。 比如:hover :active :visited :link :visited :first-child :focus :lang等 由于状态的变化是非静态的,所以元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，
伪类与伪元素的区别
qq_45272642的博客
10-16 2039
一、什么是伪类和伪元素 提到“伪”字，你想到了什么？“假的”，“汪精卫伪政府”，“不存在的”······ 伪类：用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。我的理解就是：本身不存在，只有在特定的情况（滑动、点击）下才会被触发的状态，可以用css去修饰这个状态下的对象。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为
CSS伪类和伪元素的区别
MoeCodeFree的博客
09-12 667
CSS伪类和伪元素的区别 概念 伪类 元素的某种状态 用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。 例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它是不存在于DOM树中同时也不能被常规的CSS选择器获取到的信息，所以称为伪类。 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。 任何常规选择器可以在任何位置使用伪类。伪类的语法不区分大小写。 伪元素 人为创造的不存在于DOM
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
解析CSS中的伪元素及其与伪类的区别
09-24
CSS伪元素能使我们添加案定的HTML元素之外的元素,这里我们就来解析CSS中的伪元素及其与伪类的区别,需要的朋友可以参考下
CSS伪类和伪元素的区别详解
09-25
在CSS3中，为了更好地区分，伪类使用单个冒号（`:hover`），而伪元素使用双冒号（`::before`）。然而，出于兼容性的考虑，许多开发者仍然使用单冒号的形式。尽管如此，了解这一区别并在编写代码时遵循这一规范是有益...
浅谈CSS伪类与伪元素
01-19
伪类选择器：CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接，与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素，如被点击的链接、...
css伪类和伪元素区别
似水流年QC的博客
05-12 903
css3伪类和伪元素区别
css3伪类与伪元素
Rainy_X的博客
08-28 184
概念 CSS 伪类用于向某些选择器添加特殊的效果 CSS 伪元素用于将特殊的效果添加到某些选择器 个人理解： 伪类大多使用的是状态相关的，例如这个标签点击前后的效果，这个标签的第几个样式等 伪元素相当于是在某个元素后加个新的元素，js是无法获取的 伪类 伪元素 总结 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 但因为兼容性的问题，所以现在大部分还是统一的单冒号 原文：https://www.imooc.com/article/254506
CSS中伪类与伪元素的概念、区别及常见用法
背影、的博客
08-11 695
1. CSS 选择器 想要了解伪类与伪元素，我们不得不提到 CSS 选择器，CSS 选择器是元素和其他部分组合起来，告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式 选择器的种类有： 类型、类和ID选择器 标签属性选择器 运算符 伪类与伪元素 2. 伪类与伪元素 2.1 什么是伪类？什么是伪元素？ 伪类：伪类是选择器的一种，它用于选择处于 特定状态 的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一
CSS伪类与伪元素的区别-面试题
qq_37193887的博客
04-16 277
1)伪类(pseudo-classes) 。其核心就是用来选择DOM树之外的信息,不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。 。比如:hover :active :visited :link :visited :first-child :focus :lang等 。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，它又会失去这个样式。 。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 2)伪元
「前端面试题系列3」伪类与伪元素的区别及实战
weixin_34038652的博客
01-06 181
前言 这是前端面试系列的第3篇，前面的章节，你可以在这里找到： 「面试题」如何实现一个圣杯布局 「今日头条」前端面试题和思路解析 面试前端候选人的时候，我经常会问这样一个有关CSS的问题： 你知道伪类与伪元素么，它们的分别是什么？这时，能回答上来的很少。换一种问法，你知道 :hover, :active, :focus, :visi...
css篇-面试题6-伪类与伪元素的区别
itclanCoder
09-12 464
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
CSS3伪类与伪元素的区别及注意事项
尐轩web前端网络日志
12-10 1万+
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概
伪元素和伪类的区别总结
x1037490413的博客
09-11 7772
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 伪元素选择符 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪类选择符 再看看W3C中对于二者应用的描述： 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 其实根本意思就是就是对那些不能通过class、id等选择元素的补充 举个栗子： 如果我
浅谈CSS伪类和伪元素及CSS3新增伪类
筱葭的博客
02-28 8710
p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元素唯一的元素的每个元素。 p:only-child    选择属于其父元素唯一的子元素的每个元素。 p:nth-child(n)   选择属于其父元素的第n个子元素的每个元素。
 css伪类与伪元素
最新发布
03-19
CSS伪类和伪元素是用于和样式化HTML元素的特殊选择器。它们允许我们根据元素的状态或位置来选择元素，并为其应用不同的样式。 1. 伪类（Pseudo-classes）： - 伪类用于选择处于特定状态的元素，例如鼠标悬停、被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值