伪类和伪元素解释和他们的区别

伪类和伪元素

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

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为 已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

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

 css 伪类与伪元素区别

1. 伪类(pseudo-classes)

• 其核⼼就是⽤来选择DOM树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。

• ⽐如:hover :active :visited :link :visited :first-child :focus :lang等

• 由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。

• 由此可以看出，它的功能和class有些类似，但它是基于⽂档之外的抽象，所以叫 伪类。

1. 伪元素(Pseudo-elements)

• DOM树没有定义的虚拟元素

• 核⼼就是需要创建通常不存在于⽂档中的元素，

• ⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。

• 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器

1. 伪类与伪元素的区别

• 表示⽅法

  • CSS2 中伪类、伪元素都是以单冒号:表示,

  • CSS2.1 后规定伪类⽤单冒号表示,伪元素⽤双冒号::表示，

  • 浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。

  • CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。

  • CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以:开头的伪元素也继续⽀持，但建议规范书写为::开头

• 定义不同

  • 伪类即假的类，可以添加类来达到效果

  • 伪元素即假元素，需要通过添加元素才能达到效果

• 总结:

  • 伪类和伪元素都是⽤来表示⽂档树以外的"元素"。

  • 伪类和伪元素分别⽤单冒号:和双冒号::来表示。

  • 伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，

  • 是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类

  • 伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。

  • 伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。

  • 伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。