有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

伪类和伪元素的区别(css 伪类与伪元素 区别)详解

代码编程 炮渣日记 3周前 (11-17) 23次浏览 已收录 0个评论 扫描二维码

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树中不存在的抽象对象,⽽且这些抽象对象是能够访问到的。
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址