天天看点

伪类和伪元素区别

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

1.伪类

css2中给的定义  css伪类用于某些选择器添加特殊的效果

css3中给的定义:伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

伪类的功能有两种:

  1. 获取不存在与DOM树中的信息。比如

    <a>

    标签的

    :link

    visited

    等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;
  2. 获取不能被常规CSS选择器获取的信息。比如伪类

    :target

    ,它的作用是匹配文档(页面)的URI中某个标志符的目标元素,
伪类和伪元素区别
伪类和伪元素区别

2.伪元素

css2指出 伪元素用于某些选择器设置特殊效果

伪元素可以创建一些文档语言无法创建的虚拟元素。比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(

::first-letter、::first-line

)。同时,伪元素还可以创建源文档不存在的内容,比如使用 

::before

 或 

::after

伪类和伪元素区别

总结一下伪类与伪元素的特性及其区别:

  1. 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
  2. 伪元素本质上是创建了一个有内容的虚拟容器;
  3. CSS3中伪类和伪元素的语法不同;伪类用单冒号:表示;而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。
  4. 可以同时使用多个伪类,而只能同时使用一个伪元素;