伪类和伪元素的区别

区别

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

伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种:
1.格式化DOM树以外的信息。比如: <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
2.不能被常规CSS选择器获取到的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。

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

通过上面的概念,我们就可以知道伪类与伪元素最本质的一个区别:
伪类其实是弥补了CSS选择器的不足,用来更方便地获取信息。
而伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。除了上面这个本质区别以外,在CSS中,伪类用单冒号:表示;而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

CSS笔记

伪类的分类

2020-2-4 12:02:42

CSS笔记

伪元素选择器

2020-2-4 13:05:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索