css 伪类与伪元素的区别

昨日回顾：

什么闭包，闭包的优缺点

• 闭包就是一个函数吐出另一个函数，并且吐出的函数包含父函数变量，吐出的函数就形成了闭包
• 优点
  • 函数编译时，闭包就缓存到内存中，读取会快
  • 变量形成区块作用域，不会污染到环境
• 缺点
  • 闭包中变量会一直在内存中，无法被垃圾回收机制回收，有可能造成内存溢出
  • 如果闭包函数变量包含的层级过深，读取的时间会相对的加长
  • 有可能会获得意外的值

今日解题

伪类(pseudo-classes)

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

伪元素(pseudo-elements)

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

伪类与伪元素的区别

• 表示方法
  • CSS2 中伪类、伪元素都是以单冒号":"表示，CSS2.1 后规定伪类用":",伪元素用"::"表示。
  • 浏览器同样接受 CSS2 时代已经存在的伪元素单冒号“:”的写法，CSS2 之后新增的伪元素（如：::selection）则采用双冒号的写法
• 定义不同
  • 伪类：即假的类，可以添加类来达到效果
  • 伪元素：即假的元素，需要通过添加元素才能达到效果

总结

• 伪类和伪元素都是用来表示文档外的·元素·
• 伪类和伪元素分别用单冒号和双冒号来表示
• 伪类和伪元素的区别，关键点在于如果没有伪元素，是否需要添加元素才能达到效果，如果是则是伪元素，反之则为伪类
• 相同之处
  • 伪类和伪元素都不出现在源文件和 DOM 树中，也就是说在 HTML 源文件中是看不到伪类和伪元素的
• 不同之处
  • 伪类其实是基于普通 DOM 元素而产生的不同状态，他是 DOM 元素的某一特征
  • 伪元素能够创建在 DOM 树中不存在的抽象对象，而这些抽象对象是能够访问到的