伪类和伪元素区别

伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,
已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的
 


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

  1. 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
  2. 伪元素本质上是创建了一个有内容的虚拟容器
  3. CSS3中伪类和伪元素的语法不同;   伪类  :link  :hover         伪元素  ::before    ::after
  4. 可以同时使用多个伪类,而只能同时使用一个伪元素;
  5. 其中伪类和伪元素的根本区别在于:它们是否创造了的元素,,   这个新创造的元素就叫  "伪无素" 。

    伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。 这个新元素(伪元素)  是某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中.

     伪类:存在DOM文档中,(无标签,找不到,  只有符合触发条件时才能看到 ),  逻辑上存在但在文档树中却无须标识的“幽灵”分类。

  6.  因为伪类是类似于添加类所以可以是多个,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾 

  7.   W3C中对于二者应用的描述(描述太模糊, 不容易理解):

  

 

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类的种类

 

伪元素的种类

 

 具体使用如下

 

posted @ 2021-04-22 19:14  浣熊sky  阅读(335)  评论(0编辑  收藏  举报