css伪类与伪元素的区别

本文详细介绍了CSS3中的伪类和伪元素,包括它们的概念、使用场景和区别。伪类用于选择DOM树之外的特殊状态,如`:hover`、`:active`;伪元素则用于创建文档中不存在的元素,如`::before`、`::after`。两者在CSS2和CSS3中的表示方式有差异,伪类用单冒号,CSS3中伪元素用双冒号。关键区别在于伪类表示元素状态,而伪元素创建抽象对象。
摘要由CSDN通过智能技术生成

1、伪类(pseudo-classes)

其核心就是用来选择DOM树之外的信息不能够被普通选择器选择的文档之外的元素,用来添加一些选择器的特殊效果。

比如:hover :active :visited :link :visited :first-child :focus :lang等

由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它可能又会失去这个样式。

由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

2、伪元素(Pseudo-elements)

DOM树没有定义的虚拟元素

核心就是需要创建通常不存在于文档中的元素,比如::before :after它选择的是元素指定内容,示
选择元素内容的之前内容或之后内容。

伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。用于将特殊的效果添加到某些选择器

3、伪类与伪元素的区别

1)表示方法
CSS2中伪类、伪元素都是以单冒号:表示CSS2.1后规定伪类用单冒号表示,伪元素用双冒号:表示,

浏览器同样接受CSS2时代已经存在的伪元素(:before, :after, :first\fffeline, :first-letter等)的单冒号写法。

CSS2之后所有新增的伪元素(如::selection),应该采用双冒号的写法。

CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。浏览器对以:开头的伪元素也继续支持,但建议规范书写为ÿ

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值