我的回答

伪类: 是选择器, 加强css选择功能的

伪元素: 是元素, 可以设置css属性, 可以设置content:’’设置内容

参考答案

  • 1.伪类(pseudo-classes)
    • 其核心就是用来选择DOM树之外的信息,不能够被普通选择器选择的文档之外的元素,用来添加一些选择器的特殊效果
    • 比如 :hover :active :visited :first-child :focus :lang等
    • 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又失去这个样式
    • 由此看可以看出,它的功能和class有些类似,但是它是基于文档之外的抽象,所以叫伪类
  • 2.伪元素(pseudo-elements)
    • DOM树没有定义的虚拟元素
    • 核心就是需要创建通常不存在于文档的元素
    • 比如::before ::after 选择的是元素指定内容,表示选择元素内容的之前的内容或之后内容
    • 伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。用于将特殊的效果添加到某些选择器
  • 3.两者区别
    • 表示方法
      • css2中伪类、伪元素都是单冒号:表示
      • css2.1后规定伪类用单冒号表示,伪元素用双冒号::表示
      • 浏览器同样接受css2时代已经存在的伪元素(:before :after :first :line :first-letter等)的单冒号写法
      • css2之后所有新增的伪元素(::selection),应该采用双冒号的写法
      • css3中,伪类与伪元素在语法上也有所区别,伪元素修改以::开头。浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头
    • 定义不同
      • 伪类即假的类,可以添加类来达到效果
      • 伪元素即假元素,需要通过添加元素才能到达效果
  • 总结
    • 伪类和伪元素都是用来表示文档树之外的”元素”
    • 伪类和伪元素分别用单冒号:和双冒号::来表示
    • 伪类和伪元素的区别,关键点在于如果没有伪元素(或伪类)
    • 是否需要添加元素才能达到效果,如果是则是伪元素,反之是伪类
  • 4.相同之处
    • 伪类和伪元素都不会出现在源文件和DOM树中。也就是说在html源文件中是看不到伪类和伪元素的
  • 不同之处
    • 伪类其实就是基于普通DOM元素而产生的不同状态,他是DOM元素的某一特征
    • 伪元素能够创建在DOM树中不存在的抽象对象,而且这些抽象对象是能够访问到的Ï