伪类和伪元素的区别?

本文详细介绍了CSS中的伪类和伪元素的区别,伪类用于描述元素根据用户行为动态变化的状态,如`:hover`、`:active`等;伪元素则用于创建不在文档树中的元素,如`::before`、`::after`,并添加样式。此外,列举了常见的伪类选择器,如`:link`、`:visited`、`:hover`、`:focus`等,以及伪元素选择器,如`::first-line`、`::first-letter`、`::before`、`::after`,帮助开发者更好地理解和运用这些概念。
摘要由CSDN通过智能技术生成

一、简单区分
伪类用于当已有元素处于某种状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。也就是说,当用户悬停指定的元素时,我们可以通过:hover来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::before来在一个元素前添加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
有时你会发现伪元素使用了两个冒号::而不是一个冒号:。这是CSS3的一部分,并尝试区分伪元素和伪类。大多数浏览器都支持这两个值。按照规则应该使用(::)而不是(:),从而区分伪类和伪元素。但是,由于在旧版本的W3C规范并未对此进行特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
二、常见的伪类选择器
:link:选取未访问过的超链接元素。如果我们注意过搜索引擎的结果的话,它里面的链接只要点过的就会变色,从而标记哪个链接是访问过的。:link 这个属性就是用来标识没访问过的链接。
:visited:选取访问过的超链接元素。和第一条相反,:visited 是用来标记哪个链接是已经访问过的,防止重复点击。
:hover:选取鼠标悬停的元素。,这个伪类经常用在 PC 端,当鼠标放在一个元素上时,可以用 :hover 来控制鼠标悬停的样式。因为在移动端里没有鼠标的概念,所以移动端里很少用这个伪类。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值