css中伪类与伪元素的区别及用法

一、概念

伪类：

元素的某种状态

用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它是不存在于DOM树中同时也不能被常规的CSS选择器获取到的信息，所以称为伪类。

伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

任何常规选择器可以在任何位置使用伪类。伪类的语法不区分大小写

 

 

伪元素：

人为创造的不存在于DOM树中的抽象元素

用于创建一些不存在于DOM树中的抽象元素，并为其添加样式。例如，我们可以通过:before在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM树中。

伪元素由两个冒号::开头，然后是伪元素的名称。使用两个冒号是为了区别伪类和伪元素（CSS2中没有区别）

 

 

使用伪元素时，必须设置content，否则无效。

::before是在被修饰元素的第一个子元素位来添加虚拟元素的。

::after是在被修饰元素的最后一个子元素位来添加虚拟元素的。

如：给第一个字母添加样式

<style>
      .p1::first-letter {
        font-size: 40px;
        color: yellowgreen;
      }
</style>

总结：

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的抽象元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的抽象元素。