[CSS] [2021-01-16 更新] CSS 伪类与伪元素的区别？

[jeddygong]

什么是伪类？什么是伪元素？

一、伪类(pseudo- classes)

• 其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。
• 比如:hover :active :visited :link :visited :frst- -child :focus :lang等
• 由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，它又会失去这个样式。
• 由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

二、伪元素(Pseudo- -elements)

• DOM树没有定义的虚拟元素
• 核心就是需要创建通常不存在于文档中的元素
• 比如::before ::after 它选择的是元素指定内容，表示:选择元素内容的之前内容或之后内容。
• 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。用于将特殊的效果添加到某些选择器。

伪类与伪元素的区别

• 表示方法
  • CSS2中伪类、伪元素都是以单冒号:表示
  • CSS2.1后规定伪类用单冒号表示，伪元素用双冒号::表示
  • 浏览器同样接受CSS2时代已经存在的伪元素(:before, :after, :first\ufffeline, :frst-letter等)的单冒号写法。
  • CSS2之后所有新增的伪元素，(如::selectien),应该采用观双冒号的写法。
  • CSS3中， 伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头
• 定义不同
  • 伪类即假的类，可以添加类来达到效果
  • 伪元素即假元素，需要通过添加元素才能达到效果
• 总结：
  • 伪类和伪元素都是用来表示文档树以外的"元素"。
  • 类和伪元素分别用单冒号:和双冒号::来表示。
  • 伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类), 是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类。

伪类与伪元素的相同之处

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

伪类与伪元素的不同之处

• 伪类其实就是基于普通DOM元素而产生的不同状 态，他是DOM元素的某- -特征。
• 伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。