css伪元素和伪类的区别

 我来答
扬瑞灵竺莞
游戏玩家

2019-10-04 · 游戏我都懂点儿,问我就对了
知道大有可为答主
回答量:1.1万
采纳率:26%
帮助的人:765万
展开全部
简单的来说,伪类是针对CSS,而伪元素是针对HTML,伪类选择器是CSS选择器的一种,而伪类是“假”的HTML标签
伪类(选择器)本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
伪元素本质上是创建了一个有内容的虚拟容器;
在CSS3中,伪类和伪元素的语法得到了进一步的调整(一个冒号和两个冒号);
在开发当中,可以同时使用多个伪类,而只能同时使用一个伪元素。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
中公教育IT培训优就业
2020-08-28 · 百度认证:北京中公教育科技官方账号
中公教育IT培训优就业
中公教育IT培训品牌,致力于培养互联网领域的高端人才,以学员就业为目的,优质就业为宗旨,是一家集Java开发、Web前端、UI/UE交互设计、大数据、软件测试等课程为一体的IT培训机构。
向TA提问
展开全部

伪类和伪元素的区别,其实很简单,从字面上就可以理解。它们有一个共同的修饰词“伪”,那么“伪”是什么意思呢?就是假的。所以,伪类就是假的类,伪元素就是假的元素,这就是在字面上它们之间的区别。

定义

伪类:

CSS3给出的定义是:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻译过来的意思就是:伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

通过上面的概念我们知道了伪类的功能有两种:

1.格式化DOM树以外的信息。比如: 标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。

伪元素:

CSS3给出的定义如下:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

大致翻译过来的意思就是:伪元素可以创建一些文档语言无法创建的虚拟元素。比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter、::first-line)。同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after。

伪类和伪元素的区别(CSS3下的区别)

通过上面的概念,我们就可以知道伪类与伪元素最本质的一个区别:

1、伪类其实是弥补了CSS选择器的不足,用来更方便地获取信息。

HTML:

CSS:

浏览器:

查看元素面板:

2、而伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。

HTML:

CSS:

浏览器:

查看元素面板:


所以,你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。

除了上面这个本质区别以外,在CSS3中:

3.伪类用单冒号:表示;而伪元素用双冒号::表示。

4.一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式