Skip to content

第 12 题:css 伪类与伪元素区别 #18

@lgwebdream

Description

@lgwebdream
Owner

欢迎在下方发表您的优质见解

Activity

Genzhen

Genzhen commented on Jun 23, 2020

@Genzhen
Collaborator

1)伪类(pseudo-classes)

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

2)伪元素(Pseudo-elements)

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

2)伪类与伪元素的区别

  • 表示⽅法

    • CSS2 中伪类、伪元素都是以单冒号:表示,
    • CSS2.1 后规定伪类⽤单冒号表示,伪元素⽤双冒号::表示,
    • 浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first�line, :first-letter 等)的单冒号写法。
    • CSS2 之后所有新增的伪元素(如::selection),应该采⽤双冒号的写法。
    • CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。浏览器对以:开头的伪元素也继续⽀持,但建议规范书写为::开头
  • 定义不同

    • 伪类即假的类,可以添加类来达到效果
    • 伪元素即假元素,需要通过添加元素才能达到效果
  • 总结:

    • 伪类和伪元素都是⽤来表示⽂档树以外的"元素"。
    • 伪类和伪元素分别⽤单冒号:和双冒号::来表示。
    • 伪类和伪元素的区别,关键点在于如果没有伪元素(或伪类),
    • 是否需要添加元素才能达到效果,如果是则是伪元素,反之则是伪类。

4)相同之处:

  • 伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。
    不同之处:
  • 伪类其实就是基于普通DOM元素⽽产⽣的不同状态,他是DOM元素的某⼀特征。
  • 伪元素能够创建在DOM树中不存在的抽象对象,⽽且这些抽象对象是能够访问到的。
Jiangying-Chen

Jiangying-Chen commented on Jan 28, 2021

@Jiangying-Chen
yousekle

yousekle commented on Sep 12, 2021

@yousekle

nice~

differLiu

differLiu commented on Feb 21, 2022

@differLiu
  • 伪类:就是元素状态,比如:focus、hover、checked,都是一种事件类型
  • 伪元素:就是元素,比如:::before,::after,::selection,都是一种元素
aaronxdd

aaronxdd commented on Sep 7, 2024

@aaronxdd

在CSS3之前,伪类和伪元素都叫伪类,CSS3之后才有区分,并添加了新的一些伪元素(::setction、::placeholder),并规定伪类用:表示,伪元素用::表示。
如何区分伪类和伪元素:核心在于是否创建了"新的元素"
伪类:表示元素的状态, 例如: :hover、:disabled
伪元素:看上去像在元素上添加了新的展示元素,但是是假元素,无法选中元素

differLiu

differLiu commented on Sep 7, 2024

@differLiu
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @lgwebdream@aaronxdd@Genzhen@differLiu@Jiangying-Chen

        Issue actions

          第 12 题:css 伪类与伪元素区别 · Issue #18 · lgwebdream/FE-Interview