css伪类与伪元素区别

伪类

伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

特点:
1.获取不存在与DOM树中的信息。比如a标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;
2.获取不能被常规CSS选择器获取的信息。
3.使用单冒号:
在这里插入图片描述

伪元素

伪元素,是在 DOM 树中创建了一些抽象元素,这些抽象元素是不存在于文档流 中的。

伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

特点
1.css3规定使用双冒号(::)表示
2.由于兼容性问题,所以现在大部分还是统一单冒号(:),因为除了IE8及其以下版本不支持双冒号(::)外,其他都支持。
常见的几种伪元素是: :after , :before 以及 :first-letter。

根本区别:是否创建了新元素

猜你喜欢

转载自blog.csdn.net/qq_34035425/article/details/84992011