伪类和伪元素的区别,其实很简单,从字面上就可以理解。它们有一个共同的修饰词“伪”,那么“伪”是什么意思呢?就是假的呗。所以,伪类就是假的类,伪元素就是假的元素,这就是在字面上它们之间的区别。下面我们再从定义上感受一下。
1.伪类
css2中给的定义 css伪类用于某些选择器添加特殊的效果
css3中给的定义:伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
伪类的功能有两种:
- 获取不存在与DOM树中的信息。比如
标签的<a>
、:link
等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;visited
- 获取不能被常规CSS选择器获取的信息。比如伪类
,它的作用是匹配文档(页面)的URI中某个标志符的目标元素,:target
2.伪元素
css2指出 伪元素用于某些选择器设置特殊效果
伪元素可以创建一些文档语言无法创建的虚拟元素。比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(
::first-letter、::first-line
)。同时,伪元素还可以创建源文档不存在的内容,比如使用
::before
或
::after
。
总结一下伪类与伪元素的特性及其区别:
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- CSS3中伪类和伪元素的语法不同;伪类用单冒号:表示;而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。
- 可以同时使用多个伪类,而只能同时使用一个伪元素;